vue顶部页面加载进度条

示例：

1.下载

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.修改样式和颜色（需写全局）

/* 更改进度条颜色 */
#nprogress .bar {
  background: #67C23A !important;
  height: 4px !important;
}

参考：vue引入页面顶部加载进度条_Colesyn L.的博客-优快云博客_vue 顶部加载条