左侧菜单路由配置

MagnumHou 2023-01-13 03:23:04

课时名称	课时知识点
左侧菜单路由配置	左侧菜单路由配置

...全文

181 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

参考 https://router.vuejs.org/zh/guide/advanced/meta.html。属性有限，所以需要扩展。文件，直接复制官网代码。

vue配置子路由，实现点击左侧菜单，内容区域显示不同的内容

本文通过实现了一个动态配置的菜单系统，主要解决了以下问题：✅ 菜单数据抽离，支持动态扩展；✅ 使用reactive和h实现响应式菜单与图标；✅ 菜单与路由联动，高亮与展开逻辑清晰；✅ 选中项自动跟随路由，解决高亮错误的问题；✅ 简洁可维护，方便后期迭代。这种实现方式不仅适用于后台管理系统，还能灵活扩展到权限菜单、动态菜单等场景。✨ 如果你在阅读过程中遇到问题，或者有任何疑问和想法，欢迎在评论区留言 💬，我们一起讨论！

判断后挂载路由，就可以实现根据用户权限不同生成不同的左侧菜单并实现动态路由的生成和跳转。

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章