vue-router结合顶部进度条NProgress的使用

简介：顶部进度条，切换路由加载页面的一个进度情况的展示

1、安装插件

npm install nprogress -S

2、使用

// 在路由守卫拦截中引入
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

NProgress.configure({ showSpinner: false }) // 禁⽤进度环 若为true右侧会出现一个进度环
// 路由跳转前
router.beforeEach(async (to, from, next) => {
  NProgress.start()// 开始进度条
  next()
 //.....其他代码
})
// 路由跳转后
router.afterEach(() => {
  NProgress.done()// 结束进度条
})

3、更改样式
在全局css或者app.vue中添加如下代码，即可修改颜色

#nprogress .bar {
  background:#ff6454 !important; // 自定义颜色
  height: 10rpx !important;        // ⾼度
}