如下圖所示互订,綠色的進度條就是NProgress實現(xiàn)的效果
在這里插入圖片描述
1、安裝
$ npm install --save nprogress // 或者
$ yarn add nprogress
//用法
NProgress.start();
NProgress.done();
2纲缓、使用
//導入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})