Vue动态路由
Vue动态路由
向路由器添加路由通常是通过routes选项完成的,但是在某些情况下,我们可能希望在应用程序已经运行时添加或删除路由,也就是以编程的方式添加或删除路由。
1、添加路由
动态路由主要通过两个方法来实现:router.addRoute()
和router.removeRoute()
。router.addRoute()
方法只是注册一个新的路由,如果新注册的路由与当前位置匹配,则需要使用router.push()
函数或router.replate()
函数手动导航以显示新路由。
在下面的代码中,只定义了一个单一的路由:
const router=createRouter({
history:createWebHistory(),
routes:[{
path:'/:acticleName',
component:Article
}],
})
转到任何页面,如/about、/store,都将渲染Article组件。如果在/about上想显示一个新路由,那么仅仅编写下面的代码是不够的
router.addRoute({
path:'/about',
component:About
})
路由到/about页面,仍将显示Article组件。要显示About组件,我们需要手动调用router.replate()
函数改变当前位置并覆盖之前的位置。代码如下所示:
router.addRoute({
path:'/about',
component:About
})
//也可以使用this.$route或route=useRoute()(在setup函数中)
router.replace(router.currentRoute.value.fullPath)
如果需要等待新路由显示,则可以调用await.router.replace()
2、在导航守卫中添加路由
在导航守卫中添加或删除路由,不要调用router.replace()
函数,而是通过返回新的位置来触发重定向。代码如下所示:
router.beforeEach(to=>{
if(!hasNecessaryRoute(to)){
router.addRoute(generateRoute(to))
//出发重定向
return to.fullPath
}
})
上面的示例假设两件事:首先,新添加的路由记录将匹配到目标位置,这实际上导致了与我们尝试访问的位置不同;其次,hasNecessaryRoute()
函数在添加新路由后返回false
,以避免无线重定向。
因为我们进行了重定向,所以替换了正在进行的导航守卫,其行为与前面的示例类似。在实际场景中,添加更有可能发生在导航守卫之外。例如,当一个视图组件挂在时,它会注册新的路由。
3、删除路由
有几种不同的方式可以删除现有的路由。
3.1 通过添加名称冲突的路由。
如果添加了一个与现有路由同名的路由,那么会先删除该路由,然后再添加路由。代码如下所示:
router.addRoute({
path:'/about',
name:'about',
component:About
})
//这将删除先前添加的路由,因为它们具有相同的名称且名称是唯一的
router.addRoute({
path:'/other',
name:'about',
component:Other
})
3.2 通过调用router.addRoute()函数返回的回调。
const removeRoute=router.addRoute(routeRecord)
removeRoute() //如果路由存在,则删除它
这在路由没有名称时非常有用。
3.3 通过调用router.removeRoute()函数按名称删除一个路由。
router.addRoute({
path:'/about',
name:'about',
component:About
})
//删除路由
router.removeRoute('about')
注意:如果希望使用remoceRoute()函数,但又希望避免名称冲突,可以在路由中使用Symbol作为名称。 当一个路由被删除时,它的所有别名和子路由都会被删除。
4、添加嵌套路由
要想现有路由添加嵌套路由,可将路由的名称作为第一个参数传递给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
}]
})
5、查看现有路由
Vue Router给出了两个查看现有路由的函数:
router.hasRoute:检查路由是否存在。
router.getRoutes():获取包含所有路有记录的数组。
相关文章
- 2020年Vue面试题汇总[通俗易懂]
- vue单页面应用的原理
- Vue路由
- vue 路由嵌套_vue路由实现方式
- vscode设置vue模板_vscode怎么创建vue项目
- 腾讯前端常考vue面试题整理
- Vue中使用axios请求后端接口
- Markdown文件居然也可以直接作为Vue路由组件?
- 一面高频vue面试题
- Vue 组件通信与路由
- Vue 路由
- Vue-CLI脚手架基本使用和Vue2项目结构及路由
- Vue的生命周期函数详解[通俗易懂]
- Vue生成二维码_vue通过二维码分享
- vue axios轮询更新echarts 页面崩溃问题
- Vue路由嵌套控制台发出警告Named Route ‘Home‘ has a default child route. When navigating to this named route (:to
- 8 个很棒的 Vue 开发技巧
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- 滴滴前端高频vue面试题(边面边更)_2023-03-13
- Vue.js 滑动拼图验证码实现笔记
- Vue监听路由中传参的变化-关于watch的使用方式
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- Vue应用中部署Redis(vue中使用redis)