Element UI NavMenu 动态生成

实现原理使循环获取router中的数组循环,需要约定好路由中要配置的信息及结构

动态生成导航的前提是: 约定大于配置

NavMenu

  <el-menu class="menu" default-active="/" router unique-opened>
        <h2>你的降灵</h2>
        <el-menu-item index="/">首页</el-menu-item>
        <template v-for="route in menuRoutes">
          <el-submenu v-if="hasChildren(route)" :index="route.path" :key="'submenu-' + route.path">
            <template slot="title">
              <span>{{ route.title || route.name || route.path }}</span>
            </template>
            <el-menu-item
              v-for="child in route.children"
              :key="'child-' + child.path"
              :index="route.path + '/' + child.path">
              {{ child.title || child.name || child.path }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="route.path" :key="'item-' + route.path">
            {{ route.name || route.path }}
          </el-menu-item>
        </template>
      </el-menu>

router

const routes = [
  {
    path: "/",
    name: "home",
    title: "首页",
    component: HomeView,
  },
  {
    path: "/echarts",
    title: "echarts图表",
    component: Parent,
    children: [
      {
        path: "map",
        name: "map",
        title: "echarts地图",
        component: () => import("../views/echarts/ChinaMap.vue"),
      },
      {
        path: "line",
        name: "echarts-line",
        title: "常用图表",
        component: () => import("../views/echarts/EchartsView.vue"),
      },
      {
        path: "word-cloud",
        name: "word-cloud",
        title: "字符云",
        component: () => import("../views/echarts/WordCloud.vue"),
      },
      {
        path: "liquid-fill",
        name: "liquid-fill",
        title: "水球图",
        component: () => import("../views/echarts/LiquidFill.vue"),
      },{
        path: "bar-racing",
        name: "bar-racing",
        title: "动态排序图",
        component: () => import("../views/echarts/RacingBar.vue"),
      },
    ],
  },
  {
    path: "/background",
    title: "背景相关",
    component: Parent,
    children: [
      {
        path: "particles",
        name: "particles",
        title: "背景动画",
        component: () => import("../views/animation/BgView.vue"),
      },
    ],
  },
  {
    path: "/anim",
    name: "animate",
    title: "Animation相关",
    component: Parent,
    children: [
      {
        path: "clip-path",
        name: "clip-path",
        title: "clip-path",
        component: () => import("../views/animation/ClipPathView.vue"),
      },
      {
        path: "lottie",
        name: "lottie",
        title: "Lottie动画库",
        component: () => import("../views/animation/AnimateView.vue"),
      },
    ],
  },

  {
    path: "/utils",
    name: "utils",
    title: "常用工具",
    component: Parent,
    children: [
      {
        path: "dialog",
        name: "dialog",
        title: "命令式弹窗",
        component: () => import("../views/utils/DialogView.vue"),
      },
    ],
  },

  {
    path: "/AMap",
    name: "amap",
    title: "高德地图",
    component: Parent,
    children: [
      {
        path: "geo",
        name: "geo",
        title: "高德地图",
        component: () => import("../views/map/GdMap.vue"),
      },
    ],
  },
];