如何写vue.js菜单组件

<template>
  <nav class="menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <a :href="item.url" @click="handleClick(item)">{{ item.label }}</a>
        <menu-item v-if="item.children" :menu-items="item.children" />
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuItems: Array
  },
  methods: {
    handleClick(item) {
      // 可以在这里处理点击事件，比如路由跳转
      console.log('Menu item clicked:', item);
    }
  }
};
</script>

<style>
.menu ul {
  list-style-type: none;
  padding: 0;
}
.menu li {
  display: inline-block;
  margin-right: 10px;
}
.menu a {
  text-decoration: none;
  color: #333;
}
</style>