本文介绍了一个基于Vue和Element的后台管理系统如何从后端获取路由表并正确渲染。关键步骤包括：在store的menu.js中处理路由表，修改router/index.js保留登录页面路由，更新permission.js以动态添加路由，以及在checkPwd.vue中处理登录后的路由存储。在实施过程中，注意路由表格式转换、刷新页面时路由的挂载和菜单渲染等问题。
概述
公司后台管理系统，需要从后端获取路由表，并正确渲染。结合看到的帖子 基于vue-router的动态权限实现方案，昨天将这个需求实现了。
实现这个问题，有两个关键点。
- 登陆系统和刷新页面时，使用
router.addRoutes添加需要补充的路由表 - 在
router.beforeEach中，手动将路由表加到router.options.routes中
公司后台管理系统开发使用的模板是后台管理系统模板vue-admin-template。需要新增或改动的文件主要有4个：
- 在store/modules文件夹下新增的menu.js：处理并存储从后端获取的路由
- 修改router/index.js：只保留登陆页面的路由，其他和业务板块相关路由都删掉
- 修改permission.js：实现刷新页面时动态添加路由表，并手动给
router.options.routes赋值 - 修改checkPwd.vue：登陆成功时，将后端获取的路由表存到localstorage
下面结合代码做具体说明：
第一步
从后端获取的路由表，是不能直接通过router.addRoutes添加到路由表里，需要先修改component属性的值。我是统一在menu.js中修改。menu.js中有三大部分内容。 router
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
