vue nprogress/顶部加载进度条

下载安装

yarn add nprogress
npm i nprogress
cnpm i nprogress

引用

//分别在router.js 和 axios.js文件中使用，如无  则src/main.js下文件使用
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

配置使用

//页面打开时显示
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})
router.afterEach(() => {
  NProgress.done()
})
//axios异步请求时
NProgress.done()
放入拦截器中使用

进度条颜色修改

在vue文件中修改
 #nprogress .bar {
      background: red !important; //自定义颜色
    }

简单配置

//控制速度，一般不用特意控制，进度条速度随网页加载速度
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })