vue路由守卫＋NProgress实现页面进度条

npm安装nprogress
npm install nprogress --save

man.js文件中引入并做一些配置
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//配置滚动条
NProgress.configure({ showSpinner: false,ease:'ease',speed:3000 })

在路由守卫里去监控路由变化，从而触发进度条

// 路由变化时
router.beforeEach((to, from, next) => {
//进度条开始
  NProgress.start();
  next()
})
//后置路由守卫
router.afterEach(transition => {
//关闭进度条
  NProgress.done();
});