人事管理项目-动态加载用户菜单3

代码解释：

•　在计算属性中返回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下载。