vue3，顶部tab切换

在 Vue3 中实现顶部 Tab 切换，通常使用的是 Vue Router 和 Vue 的响应式特性，再加上一些自定义组件来构建导航栏。以下是一个基本的步骤：

1. **安装依赖**：首先安装 Vue Router 和可能需要的样式库，比如 `vue-router`, `vue-router-clever`.

   npm install vue-router @vue/cli-plugin-router --save

2. **创建路由**：在 `src/router/index.js` 中定义路由，每个 tab 对应一个路径：

   import { createRouter, createWebHashHistory } from 'vue-router'
   
   const routes = [
     { path: '/tab1', component: Tab1Component },
     { path: '/tab2', component: Tab2Component },
     // 添加更多 tabs...
   ]

   const router = createRouter({
     history: createWebHashHistory(), // 根据你的需求选择合适的history类型
     routes,
   })

   export default router

3. **顶部导航栏组件**：创建一个名为 `Navbar.vue` 的组件，利用 vuetify 或其他UI库来渲染 tab 选项：

   <template>
     <v-btn v-for="tab in $router.options.routes" :key="tab.path" @click="goTo(tab)">
       {{ tab.name }}
     </v-btn>
   </template>

   <script>
   export default {
     methods: {
       goTo(tab) {
         this.$router.push(tab.path)
       }
     }
   }
   </script>

4. **应用路由**：在 App.vue 或者 main.js 中注册并使用路由器：

   import router from './router'

   new Vue({
     router,
     // 其他App内容
   }).$mount('#app')

5. **状态管理（可选）**：如果有多页的数据需要共享，可以考虑使用 Vuex 管理状态。