nprogress实现加载进度条

由于都是懒加载的组件，在切换路由的时候需要加载资源，网速不好会 “静止”，甚至出现白页。为了提高用户体验，加上进度条是不错的选择，如下图：

​​

实现步骤：

1. 安装好插件后导入

pnpm add nprogress
# TS环境下才需要添加类型声明文件 (选装)
pnpm add @types/nprogress -D

# 博主书写在了 src / router / index.ts 里面
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2. 切换路由前开启，也就是全局前置导航守卫里开启

# 只列出核心代码
router.beforeEach((to) => {
  ...
  NProgress.start()
})

3. 路由切换完毕后关闭，也就是全局后置导航守卫里关闭

# 只列出核心代码
router.afterEach((to) => {
  ...
  NProgress.done()
})

4. 修改插件配置

# 博主书写在了 src / router / index.ts 里面
NProgress.configure({
  # 取消插件自带的loading小菊花
  showSpinner: false
})

5. 修改颜色样式

# 博主写在了 src / styles / main.scss 里面
#nprogress .bar {
  background-color: #16c2a3 !important;
}

# 不理解的看下 main.ts 入口文件的引用排序
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
// 自定义样式
import '@/styles/main.scss'
const app = createApp(App)
...

 End-------------------