左侧菜单路由配置

MagnumHou 2023-01-13 03:23:04

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

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

本文介绍如何在Vue项目中配置左侧菜单的路由，通过扩展RouteMeta接口并利用动态导入组件的方式，实现不同权限用户的菜单显示和访问控制。

该博客主要介绍了Vue配置子路由，以实现点击左侧菜单，内容区域显示不同内容的方法。包括准备二级路由下的.vue文件、在router/index.js中配置子路由、在Layout.vue里声明router - view标签，以及为菜单项el - menu - item设置index属性和路由路径。

本文介绍如何使用Vue3、TypeScript和Ant Design Vue实现左侧动态菜单，支持路由跳转、选中项同步及父菜单自动展开。涵盖菜单配置、辅助函数编写、路由联动机制，并拓展至后端驱动菜单、权限控制、状态持久化和国际化等实用场景，提升后台系统的可维护性和用户体验。

博客介绍前端登录、路由及数据缓存优化方案。登录时获取token存本地并封装到axios请求头，根据路由表动态渲染左侧菜单，用router.addRoute挂载动态路由。为减轻服务器压力，用pinia缓存数据，切换路由时判断缓存情况。退出登录清除pinia缓存和本地token。

本文详细介绍了后台管理系统的页面布局，主要由左侧菜单和右侧内容两部分构成，其中左侧菜单根据接口动态生成，可能包含多级菜单。右侧内容包括头部面包屑和页面详情。重点强调了一级菜单在路由配置中必须添加`component: Layout`，以确保页面被正确嵌入布局中。同时，文章还展示了无子菜单的一级菜单路由配置示例。

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

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

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

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

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

+ 用AI写文章