关于vue菜单导航的问题，如何解决带单高亮，以及父级菜单自动展开？

Question

如下图，vue2项目，我想实现点击tabs标签，左边对应的菜单会高亮显示，一级菜单、二级菜单和三级菜单都要高亮，另外，如果tabs标签对应的是三级菜单，那么相应的二级菜单会自动展开，一级菜单的图标高亮也会自行切换。
ps：点击tabs标签后，页面路由会切换。

Answer 1

要实现点击tabs标签后，左边对应的菜单高亮显示，并自动展开二级菜单以及切换一级菜单的图标高亮，你可以按照以下步骤进行操作：

创建一个状态管理器（如Vuex）来管理菜单的状态。在状态管理器中定义一个变量来保存当前选中的tabs标签的索引（或其他唯一标识）。

在菜单组件中，监听tabs标签的点击事件。当点击tabs标签时，触发一个方法，将当前点击的标签的索引（或其他唯一标识）保存到状态管理器中。

在菜单组件的模板中，使用v-bind绑定菜单项的class属性，根据当前选中的tabs标签的索引（或其他唯一标识）判断是否为选中状态，从而为对应的菜单项添加高亮的class。

同样，在菜单组件的模板中，使用v-bind绑定一级菜单图标的class属性，根据当前选中的tabs标签的索引（或其他唯一标识）判断是否为选中状态，从而切换一级菜单图标的高亮样式。

在菜单组件中，监听tabs标签的点击事件，根据点击的tabs标签的类型（一级、二级、三级），判断是否需要展开二级菜单。如果是三级菜单对应的tabs标签，则通过状态管理器更新二级菜单的展开状态。

使用Vue Router来管理页面的路由。当点击tabs标签时，通过Vue Router切换页面的路由，从而实现页面的切换。

通过以上步骤，你可以实现点击tabs标签后，左边对应的菜单高亮显示，并自动展开二级菜单以及切换一级菜单的图标高亮的效果。请根据你的具体项目结构和需求进行相应的调整和实现。