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> 适合简单场景。
