vue路由实现tab选项卡功能

Vue路由可以很方便地实现Tab选项卡功能，具体实现方法如下：

1. 首先，定义路由配置，每个Tab对应一个路由：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

2. 在组件中使用路由链接切换Tab：

<div class="tabs">
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-link to="/contact">Contact</router-link>
</div>

3. 在组件中使用`<router-view>`组件显示对应的Tab内容：

<template>
  <div>
    <div class="tabs">
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </div>
    <div class="tab-content">
      <router-view></router-view>
    </div>
  </div>
</template>

这样就可以实现基本的Tab选项卡功能了。当用户点击不同的Tab时，对应的路由组件会被加载并显示在页面上。你可以通过设置路由的`active-class`属性来控制选中Tab的样式。