nprogress implements loading progress bar

Since they are all lazy-loaded components, resources need to be loaded when switching routes. If the network speed is not good, it will become "static" or even a white page will appear. In order to improve user experience, adding a progress bar is a good choice, as shown below:

​​

Implementation steps:

1. After installing the plug-in, import it

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

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

2. Enable it before switching routes, that is, enable it in the global front navigation guard.

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

3. Close after the routing switch is completed, that is, close the global post navigation guard.

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

4. Modify plug-in configuration

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

5. Modify color style

# 博主写在了 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-------------------