用vue2组件的形式写一个导航栏

当然可以！下面是一个使用Vue 2组件形式编写的简单导航栏示例：

<template>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.id" @click="navigate(item.route)">
        {{ item.label }}
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { id: 1, label: 'Home', route: '/' },
        { id: 2, label: 'About', route: '/about' },
        { id: 3, label: 'Contact', route: '/contact' }
      ]
    };
  },
  methods: {
    navigate(route) {
      // 在这里处理导航逻辑，比如使用Vue Router进行路由跳转
      this.$router.push(route);
    }
  }
};
</script>

<style scoped>
nav {
  background-color: #f0f0f0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}
</style>

以上代码定义了一个导航栏组件，使用`v-for`指令遍历`navItems`数组生成导航项。点击导航项时，通过`@click`事件触发`navigate`方法进行路由跳转。你可以根据实际需求进行修改和扩展。记得在使用该组件的地方引入和注册它，并且确保已经安装并配置了Vue Router。