当前位置：首页 > VUE

vue实现tab路由

2026-03-09 04:55:17VUE

使用 Vue Router 实现 Tab 路由

在 Vue 中实现 Tab 路由通常结合 vue-router 和动态组件，以下是具体实现方法：

安装 Vue Router

确保项目中已安装 vue-router，未安装时通过以下命令安装：

npm install vue-router

配置路由

在 router/index.js 中定义路由表，为每个 Tab 分配独立路径：

import { createRouter, createWebHistory } from 'vue-router';
import HomeTab from '../views/HomeTab.vue';
import ProfileTab from '../views/ProfileTab.vue';

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: HomeTab },
  { path: '/profile', component: ProfileTab }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

创建 Tab 导航组件

在导航组件中使用 <router-link> 实现 Tab 切换：

<template>
  <div class="tab-container">
    <router-link to="/home" active-class="active-tab">Home</router-link>
    <router-link to="/profile" active-class="active-tab">Profile</router-link>
  </div>
</template>

<style>
.active-tab {
  border-bottom: 2px solid #42b983;
}
</style>

显示路由内容

在主组件中使用 <router-view> 作为内容容器：

<template>
  <div>
    <TabNavigation />
    <router-view></router-view>
  </div>
</template>

动态高亮当前 Tab

通过 route.path 匹配当前路由，动态添加高亮样式：

<template>
  <div class="tab-container">
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path" 
      :to="tab.path"
      :class="{ 'active-tab': $route.path === tab.path }"
    >
      {{ tab.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/home', name: 'Home' },
        { path: '/profile', name: 'Profile' }
      ]
    };
  }
};
</script>

嵌套路由（可选）

对于复杂 Tab 结构，可使用嵌套路由：

vue实现tab路由

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: 'info', component: UserInfo },
      { path: 'settings', component: UserSettings }
    ]
  }
];