如何实现路由跳转的进度条效果

这里我们可以通过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'