vue路由切换，浏览器内容区显示顶部加载线，缓冲线

效果图：

 首先：下载插件：

npm i nprogress -S

 在router文件夹下创建permission.js文件用来设置路由首位或者是一些其他设置，而加载条的开始结束就是在路由守卫中：

首先引入插件：

/**
 * @file
 * @description 路由导航首位
 */ 
import router from '@/router/index'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from 'store'

 然后可以进行一些加载条的配置样式速度等等：

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

然后可以在路由首位中开启和关闭加载条，原理有点像接口请求的loading加载和生命周期的执行顺序：

router.beforeEach((to, from, next) => {
    //这这里开启加载条
    NProgress.start()
  const isLogin = to.path === '/login';
  const token = store.getters.Token
  if (token && isLogin) {
    next()
  }
  if (!token && !isLogin) {
    next('/login')
  } else {
    next()
  }
})

  router.afterEach(() => {
    // 在即将进入新的页面组件前，关闭掉进度条
    NProgress.done()
  })

最后不要忘了再main.js里引入奥：

import './router/permission'

这样就完成了加载条的配置。

都看到这了，给个。。。吧