vue+element递归实现导航列表

// 在一些大型的项目的时候肯定遇到嵌套的导游列表，所以我会提供一种就是我自己觉得用vue+element最简单的一种写法，不好的话欢迎大家提意见。

// 下面是一种组件的写法

1.创建一个组件名字语义化可以叫Menus

<template>
  <div class="menus">
    <p v-for="v in navMenus" :key="v.path"> // 循环在父级接收过来的值
      <el-menu> // element中的列表组件
        <el-menu-item v-if="!v.children" :index="v.path" :route="v.path"> // 循环来判断如果没有子路由就可以直接渲染了
          <span slot="title">{{ v.title }}</span> // 渲染标题导航
        </el-menu-item> 
        <el-submenu v-if="v.children" :key="v.path" :index="v.path"> // 有字路由的
          <span slot="title">{{ v.title }}</span> // 父级的路由
          <nav-menu :navMenus="v.children"></nav-menu> // 递归循环，因为这个组件的名字叫 “NavMenu” 在浏览其中会默认识别为大写的字母会加 - 所以这个递归就是<nav-menu>
         </el-submenu>
      </el-menu>
    </p>
  </div>
</template>

<script>
export default {
  name: "NavMenu", // 当前组件的名字
  props: ["navMenus"], // 接收父级传过来的值
};
</script>

这就自我自己的一种写法，如果发现不对的地方欢迎留言