vue 路由切换进度条

安装进度条

npm install --save nprogress

在导航守卫页中引入

// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

beforeEach时启动 NProgress.start()

afterEach时结束 NProgress.done()

router.beforeEach((to, from, next) => {
  // to  上哪去
  // from  从哪来
  // next() 放行函数
  const tokenStr = sessionStorage.getItem('token')
  if (to.path === '/login') { // 去登陆页 直接放行
    if (tokenStr) {
      NProgress.start()
      return next('/Home')
    }
    NProgress.start()
    return next()
  }

  if (!tokenStr) { // token不存在  去login
    NProgress.start()
    return next('/login')
  } else { // 放行
    NProgress.start()
    next()
  }
})
router.afterEach(transition => {
  NProgress.done()
})