1.在npm安装nprogress
npm i nprogress --save
2.在main.js中引用以下代码
//顶部页面加载条
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.configure({
easing: 'ease',
speed: 500,
showSpinner: false,
trickleSpeed: 200,
minimum: 0.3
})
//路由监听
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
//路由跳转结束
router.afterEach(() => {
NProgress.done()
})
3.修改样式和颜色 (需写全局App.vue)
/* 更改进度条颜色 */
#nprogress .bar {
background: #f10180 !important;
height: 3px !important;
}