vue2 动态选项卡切换页面

在Vue2中实现动态选项卡切换页面通常涉及到组件化开发和数据驱动的概念。你可以创建一个包含多个`<router-view>`的`TabContainer`组件，每个`<router-view>`对应一个选项卡的内容区域。然后，你可以定义一个数组或者对象来存储各个选项卡的信息，包括标签名称和对应的路由路径。

以下是一个简单的步骤：

1. 定义数据结构：

data() {
  return {
    tabs: [
      { label: '选项卡1', route: '/tab1' },
      { label: '选项卡2', route: '/tab2' },
      // 添加更多的选项卡...
    ]
  }
}

2. 创建模板：

<template>
  <div class="tabs">
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        <router-link :to="tab.route">{{ tab.label }}</router-link>
      </li>
    </ul>
    <router-view v-for="(tab, index) in tabs" :key="index" :is="tab.route"></router-view>
  </div>
</template>

这里，`v-for`循环遍历`tabs`数组，并使用`router-link`组件绑定到每个选项卡的路由。同时，`router-view`也通过`v-for`嵌套显示，`:is`属性用于动态切换视图内容。

3. 使用事件或计算属性控制当前选中的选项卡：

methods: {
  switchTab(index) {
    this.$router.push(this.tabs[index].route); // 当点击其他选项卡时，导航到相应路由
  }
},
computed: {
  activeIndex() {
    return this.tabs.findIndex(tab => this.$route.path === tab.route);
  }
}

在模板中添加点击事件监听，如`@click="switchTab(index)"`，或者在`activeIndex`计算属性里检测当前路由，自动激活对应的选项卡。