vue项目引入NProgress

一、安装NProgress

yarn add nprogress

二、在router中引入NProgress

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

三、在路由守卫中配置NProgress的开始和结束

//隐藏环形进度条
NProgress.configure({ showSpinner: false })

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()
  next()
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

配置完成后在路由切换时会显示进度条

四、若需要修改进度条颜色，在App.vue中设置进度条样式

<style>
#nprogress .bar {
  background: red !important;
}
</style>