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——renderMixin【十八】
Vue——renderMixin【十八】
47 1
|
5月前
|
JavaScript
Vue——initProvide【十一】
Vue——initProvide【十一】
38 0
|
3月前
|
缓存
vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之路由的2种工作模式
37 0
|
5月前
|
JavaScript
Vue——eventsMixin【十六】
Vue——eventsMixin【十六】
30 0
|
5月前
|
JavaScript
Vue——lifecycleMixin【十七】
Vue——lifecycleMixin【十七】
35 0
|
5月前
|
JavaScript
Vue——stateMixin【十五】
Vue——stateMixin【十五】
38 0
|
JavaScript 前端开发
|
8月前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
存储 前端开发 JavaScript
【Vue2.0】—vue-router(二十六)
【Vue2.0】—vue-router(二十六)