首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Vue Router】019-动态路由 和 学习总结

【Vue Router】019-动态路由 和 学习总结

作者头像
訾博ZiBo
发布于 2025-01-06 06:36:22
发布于 2025-01-06 06:36:22
23900
代码可运行
举报
运行总次数:0
代码可运行

1.19 动态路由

1.19.1 概述

添加路由到你的路由上通常是通过 routes 配置,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。

1.19.2 添加路由

动态路由主要通过两个函数实现。router.addRoute()router.removeRoute()。它们注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()router.replace()手动导航,才能显示该新路由。我们来看一个例子: 想象一下,只有一个路由的以下路由:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

进入任何页面,/about/store,或者 /3-tricks-to-improve-your-routing-code 最终都会呈现 Article 组件。如果我们在 /about 上添加一个新的路由:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({ path: '/about', component: About })

页面仍然会显示 Article 组件,我们需要手动调用 router.replace() 来改变当前的位置,并覆盖我们原来的位置(而不是添加一个新的路由,最后在我们的历史中两次出现在同一个位置):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() (在 setup 中)
router.replace(router.currentRoute.value.fullPath)

记住,如果你需要等待新的路由显示,可以使用 await router.replace()

1.19.3 在导航守卫中添加路由

如果你决定在导航守卫内部添加或删除路由,你不应该调用 router.replace(),而是通过返回新的位置来触发重定向:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath
  }
})

上面的例子有两个假设:第一,新添加的路由记录将与 to 位置相匹配,实际上导致与我们试图访问的位置不同。第二,hasNecessaryRoute() 在添加新的路由后返回 false,以避免无限重定向。 因为是在重定向中,所以我们是在替换将要跳转的导航,实际上行为就像之前的例子一样。而在实际场景中,添加路由的行为更有可能发生在导航守卫之外,例如,当一个视图组件挂载时,它会注册新的路由。

1.19.4 删除路由

有几个不同的方法来删除现有的路由:

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

通过调用 router.addRoute() 返回的回调:(当路由没有名称时,这很有用)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

通过使用 router.removeRoute() 按名称删除路由:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 Symbol 作为名字。

当路由被删除时,所有的别名和子路由也会被同时删除

1.19.5 添加嵌套路由

要将嵌套路由添加到现有的路由中,可以将路由的 name 作为第一个参数传递给 router.addRoute(),这将有效地添加路由,就像通过 children 添加的一样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})
1.19.6 查看现有路由

Vue Router 提供了两个功能来查看现有的路由:

1.20 总结

之前使用过 Vue Router , 只是不太全面,也通过课程学习了一遍,发现在线课程内教的内容非常少,仅仅是一少部分常用的功能,因此我就想把全部的功能都过一遍,有个印象。发现《Vue.js 3.0 从入门到实践》这本书内容很全,就跟着学,后来发现特别是后面的部分,书竟然完全抄的是官方文档!哈哈哈!我也逐渐转向了查看官方文档,官方文档比书里面的内容更多,只是书里面有些常用的功能做了代码演示。这篇文档,包含官方文档、书籍里面的代码演示以及本人自己进行的代码演示,当然后面的部分不是特别常用的功能,我也是 copy 的官方文档,哈哈!学习一遍,建立初步印象,并在此记录,以备后续查询吧!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
VUE框架:vue2转vue3全面细节总结(6)动态路由
当我们做用户权限的时候,添加路由非常有用。可以使用 router.addRoute() 来添加一个路由:
淼学派对
2023/10/14
3570
VUE框架:vue2转vue3全面细节总结(6)动态路由
Vue动态路由
  向路由器添加路由通常是通过routes选项完成的,但是在某些情况下,我们可能希望在应用程序已经运行时添加或删除路由,也就是以编程的方式添加或删除路由。
别团等shy哥发育
2023/02/25
1.1K0
Vue Router深入学习(二)
通过阅读文档,自己写一些 demo 来加深自己的理解。(主要针对 Vue3) 上一篇:Vue Router 深入学习(一)
赤蓝紫
2023/01/02
8760
Vue Router深入学习(二)
Vue3学习笔记(五)——路由,Router
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。
张果
2022/11/30
8.8K0
Vue3学习笔记(五)——路由,Router
Vue-router 基础用法
组件复用时嵌套,局部组件更新时,容器create不动,可以通过监听$route变化实现
Cellinlab
2023/05/17
2150
学习 Vue 3 全家桶 - 权限设计
登录成功后,需要把这个 token 存储在本地存储里面,留着后续发送数据。实现比较简单,直接把 token 存储到 localStorage 中就行。
Cellinlab
2023/05/17
3910
学习 Vue 3 全家桶 - 权限设计
一文详解:Vue3中使用Vue Router
为了便于我们后面代码维护和管理,我们一般将路由相关的代码统一放到一个文件夹中。因此,配置Vue Router的步骤如下:
九仞山
2023/10/14
4.3K0
vue router 4 源码篇:路由诞生——createRouter原理探索
哈喽大咖好,我是跑手,本次给大家带来vue-router@4.x源码解读的一些干货。
南山种子外卖跑手
2022/10/05
2.6K0
vue router 4 源码篇:路由诞生——createRouter原理探索
Vue Router 导航守卫:避免多次执行的陷阱与解决方案
导语: Vue Router 是 Vue.js 官方提供的路由器,它用于处理单页应用(SPA)中的路由导航。在 Vue Router 中,导航守卫是非常重要的功能,它可以在路由跳转之前或之后执行一些特定的操作。但是,如果你不小心,导航守卫可能会多次执行,这可能会导致一些问题。本文将介绍如何避免导航守卫多次执行,并提供解决方案。
yaogengzhu
2023/12/12
3.7K0
Vue-Router学习笔记,持续记录
随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。 类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下,保证页面的不刷新。在 2014 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:
房东的狗丶
2023/02/17
9.6K0
Vue Router 10 条高级技巧
针对复用组件(只是路由参数发生改变),生命周期函数钩子不会被调用,如何能刷新组件了?
皮小蛋
2021/05/06
1.3K0
Vue Router 10 条高级技巧
vue-router 4.0.0-alpha API
const { route, href, isActive, isExactActive,navigate } = useLink({ to: '/sub', from :'/sub' })
copy_left
2020/04/24
1.8K0
Vue3中 router 带来了哪些变化?
本文基于的源码版本是 vue-next-router alpha.10,为了与 Vue 2.0 中的 Vue Router 区分,下文将 vue-router v3.1.6 称为 vue2-router。
前端老道
2022/03/29
3.2K0
vue --- 全局守卫 vue2.0 实现导航守卫(路由守卫)
对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。
小蔚
2019/09/11
2.5K0
vue-router 4 你真的熟练吗?
虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。
呆呆
2021/12/01
9010
Vue | vue-router基础
2.页面中router-link to:"/path" (path 要写完整路径)
Java小技巧
2022/05/23
1.6K0
[ Vue ] 通过使用 Vue-Router 梳理通用知识点
vue 是 Vue Router 是 Vuejs 官方的路由器,他和 Vue.js 深度集成,是用于单页应用中组件之间的导航,本质上就是通过 components 和 router 进行映射绑定,使用 router-link 传入指定的组件地址,通过 router-view 渲染已经和组件地址绑定好的组件。
GavinUI
2021/07/19
1.6K0
[ Vue ] 通过使用 Vue-Router 梳理通用知识点
Vue Router 4 的相对之前的变化
Vue 3 引入了createApp API,该API更改了将插件添加到Vue实例的方式。 因此,以前版本的Vue Router将与Vue3不兼容。
前端小智@大迁世界
2022/06/15
7760
【Vue Router】010-导航守卫
“导航”,表示路由正在发生改变。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。主要用于在导航过程中重定向和取消路由,或者添加权限验证、数据获取等业务逻辑。
訾博ZiBo
2025/01/06
1910
【Vue Router】010-导航守卫
$router和$route的区别
Vue Router是Vue.js的路由管理器,路由就是SPA单页应用的访问路径,在Vue实例内部,可以通过$router访问路由实例,即在路由定义文件中export default的new Router(/*...*/)路由实例,通过$route可以访问当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录,可以将$router理解为一个容器去管理了一组$route,而$route是进行了当前URL和组件的映射。
WindRunnerMax
2020/08/27
1.2K0
相关推荐
VUE框架:vue2转vue3全面细节总结(6)动态路由
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档