vue路由跳转页面显示进度条

1.需要在路由守卫页面引入一个第三方插件

yarn add  nprogress

2.在路由守卫页面中引入插件和样式

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

3.在前置路由守卫中开启进度条

nprogress.start()

4.在后置路由守卫中关闭进度条

nprogress.done()

5.此时如果前置路由守卫直接放行（也就是next()）的时候会通过后置路由守卫，可是如果强制跳转到别的页面的时候（比如next('/login')）它不会经过后置路由守卫，那么它就不会关闭进度条，那么就需要手动调用一次nprogress.done()方法，以下示例

import router from '@/router'
import store from '@/store'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
const whiteList = ['/login', '404']
router.beforeEach((to, from, next) => {
   // 刚进来就开启进度条
  nprogress.start()
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      next('/')
  // 强制跳转不会经过后置路由守卫，需要手动关闭进度条
      nprogress.done()
    } else {
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
  // 强制跳转不会经过后置路由守卫，需要手动关闭进度条
      nprogress.done()
    }
  }
})
router.afterEach(() => {
  // 路由跳转完毕后关闭进度条
  nprogress.done()
})