vue3顶部导航栏模版

### 实现 Vue 3 顶部导航栏的模板

为了创建一个基于 Vue 3 的顶部导航栏组件，可以遵循现代前端开发的最佳实践。下面是一个简单的例子来展示如何构建这样的组件。

#### 创建 `TopNavigationBar.vue` 组件

此组件将作为应用程序中的顶级导航条目：

<template>
  <nav class="navbar">
    <div class="brand-title">Brand</div>
    <ul class="navbar-items">
      <li v-for="(item, index) in items" :key="index">
        <router-link :to="{ name: item.route }">{{ item.title }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([
  {
    title: "Home",
    route: "home"
  },
  {
    title: "About",
    route: "about"
  }
]);
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.brand-title {
  font-size: 1.5em;
}
  
.navbar-items li {
  list-style-type: none;
  margin-left: 20px;
}

.navbar a.router-link-exact-active {
  color: red;
}
</style>

上述代码定义了一个名为 `TopNavigationBar` 的单文件组件[^1]。该组件利用了 Vue Router 提供的功能来进行页面间的跳转，并通过样式美化链接项以适应视觉需求。

要使这个导航栏成为整个应用的一部分，在主布局文件（通常是 App.vue 或类似的根级组件）中引入并注册它即可。

#### 注册 TopNavigationBar 并设置路由

在项目的入口文件 `main.js` 中确保已经安装了 Vue Router 插件之后，可以在 `App.vue` 文件里像这样使用新创建的导航栏组件：

<template>
  <top-navigation-bar />
  <router-view></router-view>
</template>

<script setup>
import TopNavigationBar from './components/TopNavigationBar.vue'
</script>

这里假设 `./components/TopNavigationBar.vue` 是放置自定义组件的位置；如果路径不同，则需相应调整导入语句。