因为这一块实在太多了，所以直接新开一个了
我们继续来进行侧边栏菜单的开发：
我们使用element提供的menu菜单
首先编辑layout文件夹里面的components文件夹里面的FMenu.vue
粘贴上element提供的menu菜单
这里直接上代码：

这里重要的主要是定义了一个asideMenus数组对象，对菜单栏的名称和图标进行赋值，当然别忘了改上面template部分的v-for进行动态获取。然后就是利用handleSelect事件进行跳转。
在pages下面创建一个goods文件夹，然后创建list.vue如下

然后编辑router文件夹里面的index.js，如下引入页面的同时并对跟路由的子路由再复制一份，编辑路径和名称表示这是商品管理页的路由。

到这里，我们的侧边栏部分就做好了。

然后我们进行展开和收起菜单的功能的制作：
这个要进行状态的改变，所以会用到vuex的状态管理，在里面编辑：

主要是进行主页面宽度的管理。

找到FHeader.vue里面的缩起菜单图标：
搞成伸缩是两个不同的图标，并且加上状态管理，因为管理的是宽度，所以我们就能实现伸缩。

而宽度的状态我们是写在vuex里面的Index.js里面的，所以就没问题了。
而在FMenu.vue里面我们也要进行处理：利用computed属性来判断是否折叠。


最后我们的内容宽度当然也要跟着改变，这就编辑admin.vue，也加上宽度状态管理就行

然后运行项目：


我们发现没有问题，所以就成功的做完了折叠功能。

然后我们来实现菜单选中和路由关联：
就是url地址上面的url是和当前展开的页面相对应的
首先我们动态引入一个default-active方法，他就是指默认激活的菜单的index

然后在下面引入route，用route.path方法，就是说明默认值是当前路径。

这样，我们就完成了菜单选中和路由关联功能。

接着我们来实现数据前后端交互：
前面的菜单栏我们是写死的，那么这里的菜单栏我们要从数据库里引入动态的，所以要实现前后端交互。
首先在store里面拿到这些数据：
这里是拿了SET_MENUS和SET_RULENAMES两个里面的数据，

然后在actions里面拿数据

之后找到FMenu里面原本写死的菜单栏，我们从刚刚state里面获取的拿数据，不再写死。

然后在pages文件夹里面加上一个category文件夹，里面加上list.vue，这就代表着分类列表

然后别忘了在router里面要加上一个分类列表的路由：

到这里，我们就完成了前后端数据交互，运行一下：
我们发现菜单栏都是从数据库获取的，然后分类列表也能成功显示，说明我们成功的从数据库里取出了menu数据跟前端进行交互。

到这里，我们就完成了前后端数据的交互。

然后我们来实现根据菜单动态添加路由功能：

这里我们将之前定义的const routes数组全部注释掉，然后写我们的动态路由：
所有的默认路由放在一个routes里，这是所有用户共享的

然后子路由我们再包在asyncRoutes里面

动态路由我们单独定义了一个方法，利用的是递归，大概思路都在注释里，写的很详细。

然后在permission.js里面，我们进行方法的调用，因为调用的最好时间就是在拿到所有info之后，

当然这里面有一个问题，就是一开始的路由动态绑定没问题，但是一旦刷新页面就会变为404，这是因为使用addRoute()方法之后，他们只注册一个新路由，如果新增路由与当前位置相匹配，就需要自己手动导航才能显示该新路由，所以我们前面设置了默认没有新路由

但是添加了之后将值改为true

然后返回出去

而permission.js这里接收router的index.js传过来的true值

然后如果有新的路由就进行手动导航，否则就直接调用next()。

这一块东西有点复杂，但是我的注释写的很详细，需要大家结合注释去仔细推敲，到这里根据菜单动态添加路由就做完了。

今天先到这，明天继续，大家加油！

项目的gitee地址在这，有需要的欢迎clone
项目gitee地址