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

相关文章
|
JSON JavaScript API
【开源打印组件】vue-plugin-hiprint初体验
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。
3908 1
【开源打印组件】vue-plugin-hiprint初体验
|
7月前
|
机器学习/深度学习 人工智能 自然语言处理
TsingtaoAI亮相2025青岛西海岸科技成果对接会,以具身智能实训赋能AI人才培养
3月26日青岛——由青岛市科学技术局指导、青岛西海岸新区管委联合上海技术交易所等多家机构主办的“2025青岛西海岸新区科技成果对接会”在青岛金沙滩蓝海御华酒店盛大启幕。青岛市委常委,西海岸新区工委书记、区委书记孙永红,青岛市科学技术局副局长张栋华和上海技术交易所总裁颜明峰等参加会议并致辞。TsingtaoAI受邀参会并发表主题分享,公司负责人汶生以《基于DeepSeek的具身智能实训》为题,向与会嘉宾展示了AI具身智能技术如何突破传统边界,助力AI人才从实验室走向产业一线。
151 1
|
12月前
|
存储 搜索推荐 API
Electron-store本地存储功能
【10月更文挑战第18天】Electron-store 无疑为我们的 Electron 应用开发提供了强大的支持。它的本地存储功能不仅方便实用,而且性能优异,为我们打造高质量的应用提供了坚实的基础。
|
12月前
|
JavaScript 前端开发 Linux
在 Node.js 和 Electron 中获取设备 UUID 的最佳实践
【JS】在 Node.js 和 Electron 中获取设备 UUID 的最佳实践
874 1
|
12月前
|
存储 NoSQL MongoDB
MongoDB 复制(副本集)
10月更文挑战第17天
167 2
MongoDB 复制(副本集)
|
11月前
|
JSON 监控 安全
go语言选择合适的工具和库
【10月更文挑战第17天】
140 2
|
关系型数据库 MySQL
启动mysql时报错"/etc/init.d/mysqld: Permission denied"
请谨慎操作,并根据你的具体情况选择适当的解决方法。如果问题仍然存在,你可能需要查看MySQL的文档或寻求进一步的支持。
846 1
|
Oracle Java 关系型数据库
yum安装指定版本的openJDK
yum安装指定版本的openJDK
|
JavaScript 前端开发 Shell
Shell 脚本编程保姆级教程(上)
Shell 脚本编程保姆级教程(上)
|
存储 Prometheus 运维
Prometheus监控系统中常见技术问题处理指南
本文档是Prometheus使用指南,主要针对用户在使用过程中可能遇到的技术问题提供解决方案。
1573 2