Vue3简易路由菜单组件封装

友情提醒：没有vue2的基础请先学习vue2，再来学习vue3，现在很多情况下还是使用vue2,这个组件倒是通用的，改点数据就好了，主要是思想。

组件Menu

<template>
  <div>
    <ul>
      <li v-for="menuItem in menuList" :key="menuItem.name">
        <router-link :to="menuItem.path">{
  { menuItem.name }}</router-link>
        //判断子路由是否存在，这里的组件是自己调用自己，类似与递归，不要去想很多层了，递归我们算法老师教了，最多想到第二层，对于普通人来说，我就只想到第二层了，我是普通人哈哈哈哈。为什么用了一个v-if，提升一下性能，不能盲目创建，判断一下有没有再创建不会随意渲染dom，v-show的话只是隐藏了
        <MenuList
          v-if="menuItem.children"
          :menuList="menuItem.children"
        ></MenuList>
      </li>
    </ul>
  </div>
</template>

<script setup>
import MenuList from "./index.vue";
//menuList是获取到路由里面的数组传过来的值
let menuList