代码解释:
• 在计算属性中返回routes数据。明这次跳转是正常的跳转,而不是用户按F5键或者直接在地址栏输入某个地址进入的,这时直接返回,不必执行菜单初始化。
• 若store中不存在菜单数据,则需要初始化菜单数据,通过getRequest(“/config/sysmenu”)方法获得菜单JSON数据之后,首先通过formatRoutes方法将服务器返回的JSON转为router需要的格式,这里主要是转component,因为服务端返回的component是一个字符串,而router中需要的却是一个组件,因此我们在formatRoutes方法中根据服务端返回的component动态加载需要的组件即可。
• 数据格式准备成功之后,一方面将数据存到store中,另一方面利用路由中的addRoutes方法将之动态添加到路由中。
加载到路由数据之后,接下来就是菜单渲染了。菜单渲染操作在Home.vue组件中完成,部分核心代码如下:
代码解释:
• 在计算属性中返回routes数据。
• 遍历routes中的数据,根据routes中的数据渲染出el-submenu和el-menu-item。
配置完成后,启动前端项目,使用不同的身份登录,登录成功后,就可以看到不同用户对应不同的操作菜单了。图16-15所示是系统管理员看到的菜单数据。图16-16所示是用户曾巩看到的菜单数据。
动态加载用户菜单就完全实现了,完整代码可以在https://github.com/lenve/vhr下载。