硅谷甄选_菜单el-menu的小优化

目前还是在写后台管理系统的菜单部分。

现在有一个小问题需要优化。

问题

用户现在看到这样的页面，右侧内容区展示的是用户管理菜单项的内容；

这是正常的，没有问题的；

这时候，刷新页面，变成下面的样子：

问题是什么？

问题是：刷新页面后，左侧菜单都折叠起来了，右侧展示的还是用户管理菜单项的内容；

这从交互逻辑上讲，是不好的，是奇怪的，是不通顺的；

理想的效果应该是，刷新后，菜单还是打开的状态。

分析

怎么做到这个效果，要分析。

• 第一，菜单用的组件是element plus的el-menu组件；
• 第二，要看element plus的官方文档，看el-menu组件的api；

• 第三，发现el-menu组件有个属性，叫default-active，属性值是el-menu-item的索引；
• 第四，如果在el-menu的标签上，设置这个default-active属性，那么就能默认展开菜单项；

解决方案

• 1、之前做菜单的时候，菜单项的index值都是用的路由路径；
• 2、通过vue-router获取路由对象route，通过路由对象获取当前的路由路径；
• 3、通过v-bind将当前路由路径，绑定到el-menu的default-active属性上，这样就实现了；

小结

关键是什么？

要熟悉element plus中组件的用法，熟悉组件的api；

其实这个问题，不叫事；