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

最新推荐文章于 2025-02-16 20:37:32 发布

原创最新推荐文章于 2025-02-16 20:37:32 发布

· 408 阅读

5 ·

版权

文章标签：

#前端 #网络

web 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用nprogress插件配合路由守卫来实现实时的页面加载进度条，包括安装、路由前置和后置守卫的编写，以及在main.ts中的引入配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

安装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中引入写好的配置代码