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() // 进度条消失
})