NProgress用浏览器打开项目,在页面结构和数据没有加载显示之前,顶层就会出现一个进度条,页面布局完整显示进度条会消失
如何使用呢?
===》
先安装 : npm install --save nprogress 或者 yarn add nprogress
//用法
NProgress.start();
NProgress.done();
//一般在main.js全局导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
/*在跳转之前执行,自己的理解是进入页面之前*/
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
/*在跳转之后判断,自己的理解是已进入页面*/
router.afterEach(() => {
NProgress.done()
})
如果你对默认样式不喜欢,可以在App.vue
中的style
中增加:
#nprogress .bar {
background: red !important; //自定义颜色
}