vue-router实现tab

Vue Router 实现 Tab 切换功能

使用 Vue Router 实现 Tab 切换功能可以通过动态路由和嵌套路由来实现。以下是几种常见的方法：

使用动态路由

动态路由允许根据参数动态渲染组件，适合内容变化但布局不变的场景。

const routes = [
  {
    path: '/tabs/:tabId',
    component: TabContainer,
    props: true
  }
]

在 TabContainer 组件中，通过 $route.params.tabId 获取当前 Tab 的 ID，并根据 ID 显示不同内容。

使用嵌套路由

嵌套路由适合需要保持部分布局不变的场景，比如顶部导航栏和底部固定区域。

const routes = [
  {
    path: '/tabs',
    component: TabsLayout,
    children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  }
]

在 TabsLayout 组件中，使用 <router-view> 渲染子路由对应的组件。

使用编程式导航

通过编程式导航可以在点击 Tab 时切换路由。

methods: {
  switchTab(tabId) {
    this.$router.push(`/tabs/${tabId}`)
  }
}

使用 <router-link> 组件

在模板中直接使用 <router-link> 创建 Tab 导航。

<router-link to="/tabs/tab1" active-class="active">Tab 1</router-link>
<router-link to="/tabs/tab2" active-class="active">Tab 2</router-link>

结合 Vuex 管理状态

如果需要跨组件共享 Tab 状态，可以结合 Vuex 管理当前激活的 Tab。

const store = new Vuex.Store({
  state: {
    activeTab: 'tab1'
  },
  mutations: {
    setActiveTab(state, tabId) {
      state.activeTab = tabId
    }
  }
})

在组件中通过 this.$store.commit('setActiveTab', tabId) 更新当前 Tab。

监听路由变化

在组件中监听路由变化，根据路由参数更新 Tab 状态。

watch: {
  '$route.params.tabId'(newVal) {
    this.activeTab = newVal
  }
}

以上方法可以根据具体需求选择使用，动态路由和嵌套路由适合复杂场景，编程式导航和 <router-link> 适合简单场景。