vue写个首页导航

以下是一个简单的Vue首页导航组件示例：

<template>
  <div class="nav-container">
    <ul class="nav-list">
      <li v-for="item in navItems" :key="item.id" class="nav-item">
        <a :href="item.link">{{ item.label }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { id: 1, label: '首页', link: '#' },
        { id: 2, label: '产品', link: '#' },
        { id: 3, label: '解决方案', link: '#' },
        { id: 4, label: '关于我们', link: '#' },
        { id: 5, label: '联系我们', link: '#' },
      ],
    };
  },
};
</script>

<style>
.nav-container {
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 10px;
}

.nav-item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.nav-item a:hover {
  color: #007bff;
}
</style>

此示例使用了Vue的组件机制，将导航列表项定义为数据，并使用v-for指令渲染列表。每个列表项都是一个li元素，其中包含一个a元素，用于链接到对应的页面。CSS样式定义了导航栏的外观和交互效果。