用vue写一个导航栏

在Vue.js中，创建一个基本的导航栏可以分为几个步骤。首先，我们需要创建一个组件来表示每个菜单项，然后在App.vue或其他布局文件中使用这个组件。这里是一个简单的例子：

1. **创建导航栏组件** (例如`Navbar.vue`):

<template>
  <div class="navbar">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <router-link :to="{ name: item.route, params: item.params }" :class="{ active: isActive(item) }">{{ item.label }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { label: 'Home', route: 'home', params: {} },
        { label: 'About', route: 'about', params: {} },
        // 更多菜单项...
      ],
    };
  },
  methods: {
    isActive(item) {
      return this.$route.name === item.route && this.$route.params === item.params;
    },
  },
};
</script>

<style scoped>
.navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}
.active {
  background-color: lightgray;
}
</style>

2. **在App.vue中使用导航栏组件**:

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

在这个例子中，我们假设你已经配置了Vue Router，并且有对应的路由设置。`isActive`方法用于检查当前选中项是否匹配。