vue+antd递归无限层级菜单,配合动态菜单

vue+antd递归无限层级菜单，配合动态菜单

<a-menu theme="light"
                  mode="inline"
                  @click="toMenu"
                  :openKeys="openKeys"
                  v-model="selectedKeys"
                  @openChange="titleClick">
            <template v-for="(item) in arrayRouters">
              <template v-if="!item.children">
                <a-menu-item :key="item.path" v-if="!item.hidden">
                  <a-icon class="inline-block align-middle -mt-1" :type="item.icon" v-if="item.icon"/>
                  <span class="nav-text ml-1">{{ `${item.menuName}` }}</span>
                </a-menu-item>
              </template>
              <sub-menu :menuInfo="item" :key="item.path" :base-route="item.path" v-else></sub-menu>
            </template>
          </a-menu>
/**
 * 递归生成多层级菜单
 */

// import { generateTitle } from './breadcrumb/index.js';
import { Menu } from 'ant-design-vue';
import path from 'path';
// 函数式组件
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
        <span slot="title" class="menu-title">
          <a-icon :type="menuInfo.icon" v-if="menuInfo.icon" />
          <span v-if="menuInfo.routerName">{{ menuInfo.routerName }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <template v-if="!item.children">
            <a-menu-item v-if="!item.hidden" :key="resovePath(item.path)">
              <span>{{ item.routerName }}</span>
            </a-menu-item>
          </template>
          <sub-menu v-else :key="item.path" :menu-info="item"  :base-route="resovePath(item.path)" />
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    },
    baseRoute: {
      type: String,
      default: ''
    }
  },
  methods: {
    // generateTitle,
    resovePath (item) {
      return path.resolve(this.baseRoute, item);
    },
  }
};

export default SubMenu;