nprogress 进度条 插件的使用

nprogress 进度条 插件

• npm地址

• 安装

  $ npm install nprogress --save
  

• 在 router.js 文件中引入，并使用

  //导入
  import NProgress from 'nprogress'
  import 'nprogress/nprogress.css'
  
  // 如果不需要转圈配置如下代码，默认是 true
  NProgress.configure({ showSpinner: false })
  
  // 全局前置路由守卫
  router.beforeEach((to, from, next) => {
    NProgress.start() // 进度条开始
    next()
  })
  
  // 全局后置路由守卫
  router.afterEach(() => {
    NProgress.done() // 进度条消失
  })