点击菜单的每一项都会有对应的一个组件，对应的组件都会在内容区进行展示

通俗点：菜单---路由 之间的映射关系。

我们就是根据服务器给我们返回的menus 给我们动态的返回了一个菜单。

实现解决方案：

1.拿到菜单，根据菜单动态的生成路由映射（让菜单和路由是动态生成的）

2.后端返回的数据里有我们的url ，这个就是对应我们路由里面的path

3.有了path 可以让其对应我们的component

（假如说我们这里有角色管理这个菜单，角色管理肯定会对应某个url路径，刚好这个url 路径对应的是路由里面的某个path,而刚好这个path 对应的是component,那么也就是说我们根据菜单把我们路由映射关系全部动态的生成出来，动态生成好之后应该是一个数组的routes,然后把这个数组动态的添加到main的路由children 里面）

 这个实现方案也有两种：

1.菜单中就有加载组件的名称（*component:Role.vue)

  不足之处：组件名称和路径要和后端返回的字段名称保持一致

2.菜单 url 

前端代码中：path-->component---->数组routes

以上都是理论知识：权限管理和菜单动态路由的映射关系。

实践首页页面与路由映射的创建

1.现在我们需要把所有的页面给创建出来

• 所有页面的创建
• 所有页面对应的映射关系

2.因为一个个创建出来页面起来太过于繁琐

可以借助一个页面自动生成自动化工具

npm install coderwhy -g

使用工具：

coderwhy add3page  组件的名称  -d(告诉组件存放目录位置)

 add3 vue3的意思

coderwhy add3page user -d src/views/main/system/user

并且创建对应的路由文件

对应的页面文件夹

 注意路径一定是和我们path 与 后端返回的url 相匹配的

对应页面创建与路由映射关系如下：