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

相关文章
|
9月前
|
JavaScript 前端开发
Vue系列教程(17)- 路由(vue-router)
Vue系列教程(17)- 路由(vue-router)
71 1
|
3月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
3月前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
8月前
|
存储 前端开发 JavaScript
【Vue2.0】—vue-router(二十六)
【Vue2.0】—vue-router(二十六)
|
11月前
|
JavaScript 测试技术 开发工具
【Vue】使用vue-cli搭建SPA项目的路由,嵌套路由
Vue CLI 是一个基于 Vue.js 的官方脚手架工具,用于自动生成vue.js+webpack的项目模板,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了一系列的开发工具和配置选项。Vue CLI 提供了命令行界面和图形化界面两种方式,开发者可以根据自己的喜好选择使用。使用 Vue CLI,可以轻松进行项目初始化、管理依赖、开发调试、构建打包等常用开发任务,简化了 Vue.js 应用的开发流程,提高了开发效率。创建命令如下:xxx为自己创建项目的名称必须先安装等一些必要的环境。
|
存储 缓存 JavaScript
Pinia+Router学习笔记(十四)
本节记录Vue-Router中路由过渡动效相关内容
91 0
|
前端开发
Pinia+Router学习笔记(十五)
本节记录Vue-Router中关于路由滚动行为的相关内容
64 0
Pinia+Router学习笔记(十二)
本节记录Vue-Router的两种路由重定向方式
101 0
Pinia+Router学习笔记(十一)
本节记录嵌套路由&命名视图相关内容
105 0