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 作为名字。

相关文章
|
5月前
|
JavaScript
Vue——initProvide【十一】
Vue——initProvide【十一】
38 0
|
3月前
|
缓存
vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之路由的2种工作模式
37 0
|
5月前
|
JavaScript
Vue——lifecycleMixin【十七】
Vue——lifecycleMixin【十七】
32 0
|
5月前
|
JavaScript
Vue——eventsMixin【十六】
Vue——eventsMixin【十六】
30 0
|
JavaScript 前端开发
|
存储 前端开发 JavaScript
【Vue2.0】—vue-router(二十六)
【Vue2.0】—vue-router(二十六)
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由2
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由2
42 0
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由1
前端学习笔记202304学习笔记第十九天-vue3.0-vue2的项目中创建路由1
68 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router4.0x的基本使用
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router4.0x的基本使用
80 0

热门文章

最新文章