这里我们可以通过nprogress插件来实现这个效果，配合路由守卫来实现，路由前置守卫开启进度条，路由后置守卫放行进度条即可

1. 安装nprogress

pnpm install nprogress

    2.编写路由守卫代码

 

import router from './index'import nprogress from 'nprogress'//必须引入，否则没有效果
import 'nprogress/nprogress.css'router.beforeEach((to: any, from: any, next: any) => {nprogress.start()next()
})router.afterEach((to: any, from: any) => {nprogress.done()
})

  3.到这里配置已经好了，但是没有任何触发时间执行路由守卫，我们需要在main.ts中引入写好的配置代码

 import '@/router/permisson'