vuen3头部导航栏

在Vue3中，头部导航栏（通常称为`Header`）是一个常见的组件，用于显示页面的顶部菜单或者控制面板。在Vuetify 3中，这是一个可复用的UI组件，你可以使用它的API轻松地创建和配置。以下是如何在Vuetify 3中创建和使用头部导航栏的基本步骤：

1. 安装Vuetify：首先确保已安装Vuetify 3，可以通过npm或yarn安装：

   npm install vuetify@next
   # 或者
   yarn add vuetify@next

2. 创建Vue项目并引入Vuetify：
在`main.js`或`setup.ts`中导入并初始化Vuetify：

   import { createApp, Vuetify } from 'vuetify'
   import App from './App.vue'

   const app = createApp(App)
   app.use(Vuetify)

3. 定义头部导航栏组件：
使用Vuetify的`v-app-header`、`v-navigation-drawer`（如果需要侧边栏）和`v-btn`等元素来构建导航栏。例如：

   <template>
     <v-app>
       <v-app-header>
         <v-row class="py-0">
           <!-- 你的导航链接 -->
           <v-col v-for="(item, index) in navigationLinks" :key="index">
             <v-btn @click="goToPath(item.path)" :to="{ name: item.name }">{{ item.label }}</v-btn>
           </v-col>
         </v-row>
       </v-app-header>
       <v-content>
         <!-- 主要内容区域 -->
       </v-content>
     </v-app>
   </template>

在这里，`navigationLinks`是一个数组，包含你的导航链接对象，包括路径(`path`)和标签(`label`)。

4. 配置路由（如果需要）：
使用Vue Router来处理页面跳转，确保已经安装并配置了路由：

   import { useRouter } from 'vue-router'

   export default {
     setup() {
       const router = useRouter()
       const goToPath = (path) => router.push(path)

       // 初始化导航链接
       const navigationLinks = [
         { path: '/dashboard', name: 'Dashboard', label: '仪表板' },
         { path: '/settings', name: 'Settings', label: '设置' }
       ]

       return { navigationLinks, goToPath }
     }
   }