VUE页面顶部加载进度天

1. 先下载

npm i nprogress --save

2. 在router中index.js引入

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.configure({
    easing: 'ease',//调整动画设置和速度ms
    speed: 500,
     trickle:true, //关闭进度条步进，设置 trickle 为 false。
    showSpinner: false,//禁用进度环
    trickleRate: 0.02,//每次步进增长多少
    trickleSpeed: 200,//步进间隔ms
    minimum: 0.1 //来修改最小百分比
})
//路由监听
router.beforeEach((to, from, next) => {
    NProgress.start();//开始
    next();
});
//路由跳转结束
router.afterEach(() => {
    NProgress.done()//结束
})

3. 修改样式 App.vue (全局中)

#nprogress .bar {
  background: #67C23A !important;
  height: 4px !important;
}

官方地址：http://ricostacruz.com/nprogress/