Vue使用nprogress 进度条

安装

npm install --save nprogress

使用

NProgress.start();
NProgress.done();

在router.js中

import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

NProgress.configure({ showSpinner: false }) // NProgress Configuration

router.beforeEach(async(to, from, next) => { // 路由守卫

  // start progress bar
  NProgress.start()
 if (to.path === '/login') {
      // console.log('路径是login')
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
}
})

或者在request.js拦截器中

import NProgress from 'nprogress' // progress bar 导入js文件
import 'nprogress/nprogress.css' // progress bar style 导入样式表

//在request拦截器中显示进度条
service.interceptors.request.use(
  config => {
    NProgress.start()
    return config
  }
)

service.interceptors.response.use(
  config => {
    NProgress.done()
    return config
  }
)