vue2的 el-tab-pane 配合路由切换

el-tab-pane 是 Element UI 中的一个标签页组件，用于实现在页面中使用标签页切换不同的内容。配合路由切换，可以实现在不同的路由下切换不同的标签页内容。

在 Vue2 中，我们可以通过配置路由和 el-tab-pane 来实现路由切换标签页内容的功能。首先，我们需要使用 Vue Router 来配置路由，定义不同的路由对应不同的页面。

然后，我们可以在 el-tab-pane 中使用 v-for 循环遍历路由配置，动态生成对应的标签页，绑定不同的路由路径和组件。这样就可以实现在不同的路由下切换不同的标签页内容。

例如，我们可以在 el-tab-pane 中使用以下代码来配合路由切换标签页内容：

<el-tabs v-model="activeTab">
  <el-tab-pane v-for="route in routes" :label="route.label" :name="route.name" :key="route.name">
    <!-- 在这里根据路由对应的组件渲染不同的内容 -->
    <router-view :routes="routes"></router-view>
  </el-tab-pane>
</el-tabs>

这样，当用户切换不同的标签页时，路由会自动根据当前的路径加载对应的组件内容，实现了在不同的路由下切换不同的标签页内容的功能。

总之，通过 vue2 的 el-tab-pane 配合路由切换，我们可以实现页面内切换不同路由下的标签页内容，为用户提供更加友好的交互体验。