在vue中使用nprogress

NProgress的官网：http://ricostacruz.com/nprogress/        源码地址：https://github.com/rstacruz/nprogress

1、安装

$ npm install --save nprogress

2、在main.js中引入

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

3、在main.js中使用

NProgress.configure({ showSpinner: true });
router.beforeEach((to, from, next) => {  
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    NProgress.start();
    next()
  }
})

router.afterEach(transition => {
NProgress.done();
});

 

转载于:https://www.cnblogs.com/wuln/p/9065877.html