vue制作一个顶部导航栏

在Vue.js中创建一个顶部导航栏通常会涉及组件化的设计。首先，我们可以创建一个名为`Navbar.vue`的独立组件来管理导航菜单及其状态。以下是一个简单的例子：

<!-- Navbar.vue -->
<template>
  <div class="navbar">
    <nav class="navbar-container">
      <ul class="navbar-list">
        <li v-for="(item, index) in items" :key="index">
          <router-link :to="item.path" :class="{ active: isActive(item.path) }">{{ item.label }}</router-link>
        </li>
      </ul>
      <!-- 添加其他元素如搜索框、登录/注册按钮等 -->
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      items: [
        { path: '/', label: '首页' },
        { path: '/about', label: '关于' },
        // 更多链接...
      ],
      isActive(path) {
        return this.$route.path === path;
      }
    };
  },
};
</script>

<style scoped>
.navbar {
  /* 样式规则 */
}
.navbar-container {
  /* 顶部导航栏容器样式 */
}
.navbar-list {
  list-style-type: none;
  display: flex;
}
.navbar-list li {
  margin-right: 20px;
}
.active {
  font-weight: bold; /* 高亮当前选中的链接 */
}
</style>

在这个例子中，`items`数组包含了导航项的路径和标签，`isActive`函数用于检查当前路由是否匹配某个链接。`router-link`组件结合了Vue Router，使得点击导航项可以进行页面跳转，并自动高亮当前选中项。

要在主应用中使用这个导航栏，只需在需要的地方导入并插入`Navbar`组件：

<!-- App.vue or any other layout file -->
<template>
  <div id="app">
    <Navbar />
    <!-- 路由视图将在这里动态加载 -->
    <router-view></router-view>
  </div>
</template>

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

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