vue.js 3.x导航栏怎么做

Vue.js 3.x 中创建导航栏通常涉及到组件化和路由管理。以下是一个基本步骤：

1. **安装依赖**：
首先确保已经安装了 Vue Router，可以使用 `npm install @vue-router/core` 或者 `yarn add @vue/router`。

2. **创建Router实例**：
在主入口文件如 `main.js` 中，引入并配置 Vue Router，设置基础路径(`base`)、路由规则(`routes`) 和全局守卫(`guards`)(如权限控制)。

import { createRouter, createWebHistory } from '@vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/login',
    component: Login,
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

3. **设置导航栏组件**：
创建一个自定义的 `Navbar.vue` 组件，展示当前的路由链接，并通过 `$router` 属性访问到当前的路由信息。常见的做法是监听 `$route` 的变化，动态渲染各个链接。

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in $router.options.routes" :key="index">
        <router-link :to="{ name: item.name, params: item.params }" v-if="item.meta && item.meta.showInNavbar">
          {{ item.meta.title }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  computed: {
    // 获取路由数组并过滤出需要显示在菜单中的路由
    filteredRoutes() {
      return this.$router.options.routes.filter(r => r.meta && r.meta.showInNavbar)
    }
  }
}
</script>

4. **在App组件中使用导航栏**：
将 `Navbar` 组件作为 App 组件的一部分挂载，确保它始终可见。

<template>
  <div id="app">
    <Navbar />
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  components: {
    Navbar
  }
}
</script>

5. **可选：使用动态路由和命名路由**：
如果有多个相似的结构，可以使用动态路由和命名路由方便管理。

记得按照实际应用的需求调整细节，比如路由权限控制、懒加载等。如果你有特定场景或问题，可以在提问时详细描述以便得到更准确的帮助。