持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情
上一篇文章我们完成了头部组件的点击头像下拉菜单并且完成了三个页面的跳转，接下来我们将完成我们的侧边菜单栏，CommonAside组件
- 首先我们需要在companies文件夹里面创建好CommonAside.vue组件，然后在路由router里面的index.js文件里面配置好它的路由以及路径，然后我们就可以进行侧边菜单栏的页面编写了
- 侧边菜单栏的主体样式如下图所示：
- 这个样式我们需要用到element-plus中的Menu菜单组件，链接：element-plus.gitee.io/zh-CN/compo… ，选择侧栏那个然后复制代码到我们的项目中，这里我们选择使用collapse来展示与隐藏侧边栏，并且通过vuex仓库管理实现切换
- 在store的index.js文件里面的state里面定义一个isCollapse并赋值为true,然后在mutations里面定义一个计算属性使state.isCollapse = !state.isCollapse,然后我们在CommonAside.vue组件里面使用这个配置
- 侧边组件里面的代码如下图所示：
在script里面我们要从vuex中引入useRouter，才可以实现菜单栏的展示与隐藏
- 上面我们使用了v-show来改变store中的isCollapse的状态，如果为false,则这个侧边导航栏回折叠并且顶部的标题从后台管理系统变为后台，整个组件从200px变为64px
- el-menu组件可以直接在标签内修改它的背景颜色以及字体颜色。
