仓库管理系统-14-前端之侧边栏区域Aside的集中式状态管理菜单和动态路由
文章目录
添加菜单表,使用集中式状态管理vuex,自动生成动态路由。

1 获取对应权限菜单信息
先前通过手动在/router/index.js中配置路由,然后通过模拟菜单数据,使用v-for渲染菜单。
在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户的角色信息,获取对应权限菜单信息menuList,并将后台返回的menuList转换成我们需要的router数据结构,然后通过vue-router新添的router.addRouter(routes)方法,同时我们可以将转后的路由信息保存于vuex,这样我们可以在我们的Aside组件中获取我们的全部路由信息,并且渲染我们的左侧菜单栏,让动态路由实现。
1.1 数据库表(menu)
CREATE TABLE `menu`(