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