vue2 el导航菜单 多级

可以使用 vue-router 和递归组件来实现多级导航菜单。首先在路由配置中定义好多级的路由，然后在菜单组件中使用递归组件来渲染出多级菜单。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in menuList" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
        <!-- 递归调用子菜单 -->
        <menu-item v-if="item.children" :menu-list="item.children"></menu-item>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    menuList: {
      type: Array,
      required: true,
    },
  },
  // 递归组件
  components: {
    MenuItem: {
      props: ["menuList"],
      template: `
        <ul>
          <li v-for="item in menuList" :key="item.path">
            <router-link :to="item.path">{{ item.name }}</router-link>
            <menu-item v-if="item.children" :menu-list="item.children"></menu-item>
          </li>
        </ul>
      `,
    },
  },
};
</script>