【金秋打卡】第17天 动态路由
2022/11/10 4:23:56
本文主要是介绍【金秋打卡】第17天 动态路由,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:基于Vue3最新标准,实现后台前端综合解
课程章节: 第一章
课程讲师:Sunday
课程内容
课程中 首先将 路由文件 进行区分 (私有路由 公开路由)
页面通过
<script setup> import { useRouter } from 'vue-router' const router = useRouter() console.log(router.getRoutes()) </script>
能获取 项目中所有得路由 但获得到得路由内容是
存在重复的路由数据
不满足该条件 meta && meta.title && meta.icon 的数据不应该存在
需要定义两个方法 处理路由
/** * 返回所有子路由 */ const getChildrenRoutes = routes => { const result = [] routes.forEach(route => { if (route.children && route.children.length > 0) { result.push(...route.children) } }) return result } /** * 处理脱离层级的路由:某个一级路由为其他子路由,则剔除该一级路由,保留路由层级 * @param {*} routes router.getRoutes() */ export const filterRouters = routes => { const childrenRoutes = getChildrenRoutes(routes) return routes.filter(route => { return !childrenRoutes.find(childrenRoute => { return childrenRoute.path === route.path }) }) }
将所有得路由进行处理 之后会得到一个 我们想要得 数组
[ { "path":"/profile", "name":"profile", "meta":{ "title":"profile", "icon":"el-icon-user" }, }, { "path":"/user", "redirect":"/user/manage", "meta":{ "title":"user", "icon":"personnel" }, "props":{ "default":false }, "children":[ { "path":"/user/manage", "name":"userManage", "meta":{ "title":"userManage", "icon":"personnel-manage" }, "children":[ ] }, { "path":"/user/role", "name":"userRole", "meta":{ "title":"roleList", "icon":"role" }, "children":[ ] }, { "path":"/user/permission", "name":"userPermission", "meta":{ "title":"permissionList", "icon":"permission" }, "children":[ ] } ], }, { "path":"/article", "redirect":"/article/ranking", "meta":{ "title":"article", "icon":"article" }, "props":{ "default":false }, "children":[ { "path":"/article/ranking", "name":"articleRanking", "meta":{ "title":"articleRanking", "icon":"article-ranking" }, "children":[ ] }, { "path":"/article/create", "name":"articleCreate", "meta":{ "title":"articleCreate", "icon":"article-create" }, "children":[ ] } ], }]
这篇关于【金秋打卡】第17天 动态路由的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署