Vue使用nprogress插件

1、下载

 npm install --save nprogress

2、在router.js里添加以下代码

import NProgress from "nprogress"; // 导入 nprogress模块

import "nprogress/nprogress.css"; // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示

3、前置路由守卫

router.beforeEach((to, from, next) => {

NProgress.start(); //开启进度条

next();

});

4、后置路由守卫

router.afterEach(() => {

NProgress.done(); //完成进度条

});

5、如果要改变样式，App.vue

#nprogress .bar {

  background: blue !important;    //这里可以随便写颜色

}

或者在node_modules/nprogress下，自行修改。