vue 路由实现 tab切换
Vue 路由实现 Tab 切换
在 Vue 中，可以通过路由（Vue Router）实现 Tab 切换功能。以下是具体实现方法：
配置路由
在 router/index.js 中定义路由，每个 Tab 对应一个路由路径。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Tab1 from '../views/Tab1.vue'
import Tab2 from '../views/Tab2.vue'
import Tab3 from '../views/Tab3.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/tab1',
name: 'Tab1',
component: Tab1
},
{
path: '/tab2',
name: 'Tab2',
component: Tab2
},
{
path: '/tab3',
name: 'Tab3',
component: Tab3
},
{
path: '/',
redirect: '/tab1' // 默认重定向到第一个 Tab
}
]
const router = new VueRouter({
routes
})
export default router创建 Tab 组件
为每个 Tab 创建对应的组件文件（如 Tab1.vue、Tab2.vue 等）。
<template>
<div>
<h2>Tab 1 Content</h2>
</div>
</template>
<script>
export default {
name: 'Tab1'
}
</script>实现 Tab 切换界面
在父组件中使用 <router-link> 实现 Tab 导航，用 <router-view> 显示内容。
<template>
<div>
<div class="tabs">
<router-link to="/tab1" class="tab">Tab 1</router-link>
<router-link to="/tab2" class="tab">Tab 2</router-link>
<router-link to="/tab3" class="tab">Tab 3</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'TabsContainer'
}
</script>
<style>
.tabs {
display: flex;
border-bottom: 1px solid #ccc;
}
.tab {
padding: 10px 20px;
text-decoration: none;
color: #333;
}
.router-link-exact-active {
color: #42b983;
border-bottom: 2px solid #42b983;
}
</style>动态高亮当前 Tab
通过 Vue Router 的 router-link-exact-active 类自动实现当前 Tab 高亮，无需额外逻辑。
嵌套路由实现复杂 Tab
对于更复杂的 Tab 结构，可以使用嵌套路由：
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: 'stats',
component: Stats
},
{
path: 'settings',
component: Settings
}
]
}
]编程式导航
除了 <router-link>，也可以通过代码实现 Tab 切换：
methods: {
switchTab(tabName) {
this.$router.push(`/${tabName}`)
}
}保持 Tab 状态
默认情况下切换 Tab 会重新渲染组件，如需保持状态：
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>这种方法利用了 Vue Router 和 Vue 的内置功能，实现了完整的 Tab 切换功能，包括路由管理、状态保持和样式控制。
