vue3的NProgress页面加载虚拟进度条

页面路由切换时，有时因网络波动或加载资源过大导致加载速度慢，用户体验不好，可以安装NProgress插件展示页面加载进度条，对用户体验更友好。

1.npm/yarn安装

npm install --save nprogress
或
yarn add nprogress

2.router下的index.js

import { createRouter, createWebHistory } from 'vue-router'

// 导入 nprogress模块
import NProgress from 'nprogress';
// 导入 nprogress样式
import 'nprogress/nprogress.css';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

router.beforeEach(() => {
  // 开启
  NProgress.start()
})

router.afterEach(() => {
  // 关闭
  NProgress.done()
})

3.如果要修改样式，可以将下面代码插入app.vue或其他自定义的公共样式中

#nprogress {
  .bar {
    background: var(--el-color-primary) !important;
    z-index: 99999 !important;
  }
}