首页 > 其他分享 >【Vue Router】019-动态路由 和 学习总结

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

时间:2023-02-22 21:03:40浏览次数:66  
标签:Vue Router component 添加 router addRoute 019 path 路由


1.19 动态路由

1.19.1 概述

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

1.19.2 添加路由

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

想象一下,只有一个路由的以下路由:

const router = createRouter({
history: createWebHistory(),
routes: [{ path: '/:articleName', component: Article }],
})

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

router.addRoute({ path: '/about', component: About })

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

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()​​,而是通过返回新的位置来触发重定向:

router.beforeEach(to => {
if (!hasNecessaryRoute(to)) {
router.addRoute(generateRoute(to))
// 触发重定向
return to.fullPath
}
})

上面的例子有两个假设:第一,新添加的路由记录将与 ​​to​​​ 位置相匹配,实际上导致与我们试图访问的位置不同。第二,​​hasNecessaryRoute()​​​ 在添加新的路由后返回 ​​false​​,以避免无限重定向。

因为是在重定向中,所以我们是在替换将要跳转的导航,实际上行为就像之前的例子一样。而在实际场景中,添加路由的行为更有可能发生在导航守卫之外,例如,当一个视图组件挂载时,它会注册新的路由。

1.19.4 删除路由

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

  • 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
  • 通过调用 ​​router.addRoute()​​ 返回的回调:(当路由没有名称时,这很有用)
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
  • 通过使用 ​​router.removeRoute()​​ 按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

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

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

1.19.5 添加嵌套路由

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

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于:

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 的官方文档,哈哈!学习一遍,建立初步印象,并在此记录,以备后续查询吧!


标签:Vue,Router,component,添加,router,addRoute,019,path,路由
From: https://blog.51cto.com/u_13272819/6079434

相关文章

  • 【Vue Router】017-扩展 RouterLink*
    1.17扩展RouterLink*1.17.1概述RouterLink组件提供了足够的​​props​​​来满足大多数基本应用程序的需求,但它并未尝试涵盖所有可能的用例,在某些高级情况下,你可能会......
  • 【Vue Router】018-等待导航结果*
    1.18等待导航结果*这个功能还是很有用的!1.18.1概述当使用​​router-link​​​组件时,VueRouter会自动调用​​router.push​​来触发一次导航。虽然大多数链接的预......
  • 【Vue Router】016-路由懒加载
    1.16路由懒加载这个是很有用的,之前使用import静态导入组件是一次性导入所有的组件,当用户打开网页的时候,会下载所有的组件,这样的话就会很耗时,影响用户体验!1.16.1概述当打......
  • 【Vue Router】015-滚动行为*
    1.15滚动行为*直接贴文档吧,使用时再进行详细探索,很难所有功能都亲自实现一遍!1.15.1概述使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新......
  • 【Vue Router】014-过渡动效*
    1.14过渡动效*1.14.1概述想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用​​v-slotAPI​​:<router-viewv-slot="{Component}"><transitionname="fa......
  • 【Vue Router】013-Vue Router 与组合 API
    1.13VueRouter与组合API1.13.1概述实际上,我们在上面的代码里面已经尽量使用组合API了,在这里进行一个总结。1.13.2在setup()函数中访问Router和当前路由因为我们......
  • 【Vue Router】012-数据获取
    1.12数据获取1.12.1概述当路由被激活时,我们往往需要从服务器获取数据,以便能够正确地选渲染组件。数据获取的方式有两种,具体使用哪一种取决于应用场景和用户体验。导航后获......
  • vue3介绍 vue3创建项目 扩展vite setup函数 ref和reactive 计算属性和监听属性 生命周
    目录回顾vue3介绍vue的变化组合式API与配置项APIvue3创建项目扩展之vite使用步骤setup函数ref和reactiverefreative总结:计算属性和监听属性计算属性获取get 修改set监听属......
  • 联想小新 Air-14 2019IML电脑 Hackintosh 黑苹果efi引导文件
    原文来源于黑果魏叔官网,转载需注明出处。硬件型号驱动情况主板LenovoLNVNB161216处理器IntelCorei5-10210U/i7-10510U已驱动内存8GBDDR42666已驱动硬盘康佳KAK0500B1......
  • Vue3
    目录Vue3vue3介绍vue3创建项目1.使用vue-cli创建2.vite创建vue项目setup函数1.setup函数2.vue2的创建vue实例和vue3创建vue实例的区别ref和reactivecomputed计算属性watc......