前端中，路由切换时，顶部有进度条效果（vue3）

1.安装：  pnpm i nprogress

2.在src下新建一个用来路由鉴权文件permission.ts

3.在permission.ts文件中

//注意：此文件不是.vue文件，所以不能使用
//import {useRouter} from 'vue-router'
//const router =useRouter
//来获取router,要使用自己配置的router

import router from '@/router/index'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 任意路由切换都会触发
// 全局前置守卫
router.beforeEach((to, from) => {
    ...
  NProgress.start()
  NProgress.configure({
    // 去除加载圆圈转动的效果
    showSpinner: false
  })
  ... 
  return true
})
// 全局后置守卫
router.afterEach((to, from) => {
  NProgress.done()
})

4.在main.ts中 引入路由鉴权

import '@/permission'

5.解决nprogress报错问题（js库在ts文件中使用的报错问题）

//在src下的vite-env.d.ts文件中
declare module 'nprogress'