Vue使用NProgress实现页面顶部的进度条显示效果

import 'nprogress/nprogress.css'

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #e2e2e2 !important; 
  }
</style>

//引入nprogress 进度条插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
Vue.use(VueRouter)
// 配置进度条
NProgress.inc()
NProgress.configure({ showSpinner: false })
const routes = [{...}]
const router = new VueRouter({
  routes
})
// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
    // 开启进度条
    NProgress.start();
})
// 页面路由切换完毕的时候
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})
export default router

import router from './router'
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 
NProgress.configure({ showSpinner: false }) 
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (to.path !== '/login') {
    if (sessionStorage.getItem("token")) { // 判断当前的token是否存在 ； 登录存入的token
      next();
    } else {
      next({path: '/login'})
    }
  } else {
    next();
  }
});
router.afterEach(() => {
  NProgress.done()
})

import '@/nprogress'