当前位置：首页 > VUE

vue 路由实现tab切换

2026-01-23 08:30:43VUE

Vue 路由实现 Tab 切换的方法

使用 `router-view` 和动态路由

通过 Vue Router 的 router-view 和动态路由可以实现 Tab 切换功能。定义路由时，将 Tab 内容作为子路由或动态路由加载。

// router.js
const routes = [
  {
    path: '/tabs',
    component: TabsContainer,
    children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 },
      { path: 'tab3', component: Tab3 }
    ]
  }
]

在模板中，使用 router-link 导航，并通过 router-view 显示内容：

<template>
  <div>
    <router-link to="/tabs/tab1">Tab 1</router-link>
    <router-link to="/tabs/tab2">Tab 2</router-link>
    <router-link to="/tabs/tab3">Tab 3</router-link>
    <router-view></router-view>
  </div>
</template>

使用 `v-if` 控制显示

如果 Tab 内容较简单，可以通过 v-if 或 v-show 结合路由状态切换显示。

<template>
  <div>
    <button @click="currentTab = 'tab1'">Tab 1</button>
    <button @click="currentTab = 'tab2'">Tab 2</button>

    <Tab1 v-if="currentTab === 'tab1'" />
    <Tab2 v-if="currentTab === 'tab2'" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1'
    }
  }
}
</script>

结合 Vuex 管理状态

如果多个组件需要共享 Tab 状态，可以使用 Vuex 存储当前激活的 Tab。

// store.js
export default new Vuex.Store({
  state: {
    activeTab: 'tab1'
  },
  mutations: {
    setActiveTab(state, tabName) {
      state.activeTab = tabName
    }
  }
})

在组件中通过 mapState 和 mapMutations 使用：

<template>
  <div>
    <button @click="setActiveTab('tab1')">Tab 1</button>
    <button @click="setActiveTab('tab2')">Tab 2</button>

    <Tab1 v-if="activeTab === 'tab1'" />
    <Tab2 v-if="activeTab === 'tab2'" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['activeTab'])
  },
  methods: {
    ...mapMutations(['setActiveTab'])
  }
}
</script>

使用第三方库

如果需要更复杂的 Tab 功能（如动画、懒加载），可以使用第三方库如 vue-tabs-component。

安装：

npm install vue-tabs-component

使用示例：

<template>
  <tabs>
    <tab name="Tab 1">
      <Tab1 />
    </tab>
    <tab name="Tab 2">
      <Tab2 />
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'

export default {
  components: { Tabs, Tab }
}
</script>