安装

npm install --save nprogress

简单使用

router目录下，index.js

引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

配置

NProgress.configure({
    easing: 'ease',
    speed: 500,         // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200,  // 自动递增间隔
    minimum: 0.3        // 初始化时的最小百分比
});

路由守卫

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (to.path === '/login' || to.path === '/home') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
    if(to.matched.some(record => record.meta.requiresAuth)) {
      if(!token){
        next('/login');
      }else {
        next();
      }
    }
    // if ((!token || isAuth) && to.matched.some(record => record.meta.requiresAuth)) {
    //   next('/login');
    // } else {
    //   next();
    // }
  }
  if (to.matched.length === 0) {  //如果未匹配到路由
    from.name ? next({ name:from.name }) : next('/404');   //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
  } else {
    next();    //如果匹配到正确跳转
  }
});
// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
  NProgress.done();
});

修改进度条样式

项目App.vue

<style>
#nprogress .bar {
  background: #222222 !important;
}
</style>