Pinia+Router学习笔记(十六)

简介: 本节记录Vue-Router中动态路由相关内容

需要后端配合,从后端返回组件的名称、路径等信息,在前端使用router.addRoute({path:string,name:string,component:RawRouteComponent})方法进行添加

删除路由

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

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

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

相关文章
|
JavaScript 前端开发
Vue系列教程(17)- 路由(vue-router)
Vue系列教程(17)- 路由(vue-router)
94 1
|
1月前
|
缓存 网络架构
vue2进阶篇:vue-router之基础路由
vue2进阶篇:vue-router之基础路由
43 4
|
1月前
|
缓存
vue2进阶篇:vue-router之命名路由
vue2进阶篇:vue-router之命名路由
26 1
|
1月前
|
缓存
vue2进阶篇:vue-router之编程式路由导航
vue2进阶篇:vue-router之编程式路由导航
26 1
|
1月前
|
缓存
vue2进阶篇:vue-router之路由的props配置
vue2进阶篇:vue-router之路由的props配置
23 0
|
1月前
|
缓存
vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之路由的2种工作模式
27 0
|
6月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
6月前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
11月前
|
存储 前端开发 JavaScript
【Vue2.0】—vue-router(二十六)
【Vue2.0】—vue-router(二十六)
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由2
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由2
40 0