nprogress 进度条在vue中的使用

nprogress 进度条

NProgress是页面跳转是出现在浏览器顶部的进度条

官网：NProgress: slim progress bars in JavaScript

github： https://github.com/rstacruz/nprogress

 安装插件(安装使用npm/pnpm/yarn等都可以)

pnpm add nprogress
pnpm add @types/nprogress -D

导入

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

使用

路由守卫中使用 

//路由前置守卫使用
router.beforeEach((to) => {
  NProgress.start()  ...}
//路由后置守卫关闭
router.afterEach((to) => {
  NProgress.done()
})

//插件配置，颜色修改，可以不修改
NProgress.configure({
  showSpinner: false
})

//main.scss中统一的修改
//找到NProgress的css样式文件，查看对应样式名，进行修改
#nprogress .bar {
 background: var(--cp-primary) !important;
//自己修改对应颜色，这里用的是项目设置的主题色
}

注意：以上写法适用于vue3,如果vue2中使用，上面代码一模一样，但是要添加内容。被next('/')拦截到其他页面的时候，也要终止一遍，防止进度条不能结束， 执行 NProgress.done()