vue中实现页面顶部加载进度条

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;
}