vue：菜单栏联动内容页面tab

一、需求

需要实现效果：左侧菜单栏与右侧内容部分联动，当点击左侧的菜单，右侧会展示对应的tab，没有点击时，不展示（如刚进入页面没有点击菜单，则没有tab）；点击后没有关闭tab再打开其他菜单（如测试项目2），则测试项目2的tab高亮为选中状态。

实现效果：

二、整体实现思路

1.环境：vue、element-ui

2.首先，在el-tab-pane中，是展示的tab（如上图的测试项目1、测试项目2）。因此我们创建了一个数组activeTabs来储存tab的信息。

• :label="getTabTitle(route.path)" 对应的则是tab展示的标题内容，我用了一个方法getTabTitle获取路由对应的标题。
• :name="route.meta.title" 则是与el-tabs下的 v-model="activeName"相对应，如果name的值与v-model的值一样，则表示当前选中的tab。
• 代码中，v-model="activeName" 用于控制 el-tabs 组件的当前活动标签，而 :name="route.meta.title" 用于为每个标签指定一个唯一的名称，这样就可以通过这个名称来确定当前选中的标签。通过这两个指令影响到同一个数据（例如 activeName 和 route.meta.title），以达到实现标签切换的效果。
• 当前选中的状态由 @tab-click="selectTab" 事件处理器决定。当点击一个标签时（tab-click 事件），会触发 selectTab 方法。在 selectTab 方法中，this.activeName 属性根据点击的标签的 meta.title 进行更新。v-model="activeName" 会自动反映这个变化，使得 el-tabs 组件根据 activeName 的值来确定哪个标签是当前选中的，从而产生高亮效果。
•  @edit="handleTabsEdit"是为了对tab做一些操作，点击 tabs 的新增按钮或 tab 被关闭后触发。

值得注意的是v-model="activeName"、selectTab、 :name="route.meta.title"几个的对应关系，以及其数据结构。

三、我遇到的问题

1.数据结构问题，一开始拿到的只是name或label、path，这样是不行的，最好还是拿到当前对应菜单栏的完整router，方便我们操作。

2.点击菜单栏对应的tab没有高亮但内容显示了

3.点击关闭tab，tab关闭了但下面的内容没有关闭，没有跳转到下一个剩余tab的内容。

4.点击tab之间相互切换，功能是正常的页面内容切换，但存在问题tab没有高亮，有时候要点击两次才会高亮，判段问题是出在没有更新调用selectTab。

四、具体代码