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

相关文章
|
4月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
11月前
|
移动开发 前端开发 API
React-Router-基本使用
React-Router-基本使用
57 0
|
存储 移动开发 JavaScript
vue Router从入门到精通
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括: 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为
61 0
|
存储 JavaScript 前端开发
Vue —— 进阶 vue-router 路由(零)(路由的概念、基本使用)
Vue —— 进阶 vue-router 路由(零)(路由的概念、基本使用)
|
运维 JavaScript API
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
281 0
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
|
前端开发
Pinia+Router学习笔记(十五)
本节记录Vue-Router中关于路由滚动行为的相关内容
66 0
Pinia+Router学习笔记(十四)
本节记录Vue-Router中路由过渡动效相关内容
95 0
Pinia+Router学习笔记(十二)
本节记录Vue-Router的两种路由重定向方式
108 0
Pinia+Router学习笔记(十一)
本节记录嵌套路由&命名视图相关内容
109 0
Pinia+Router学习笔记(三)
本节记录解构Store过程中的相关操作及注意事项
83 0