一、定義template模板

<template>
    <a-layout>
        <!-- 左側導航 -->
        <a-layout-sider>
            <div>
                <a-menu
                    :inlineIndent="inlineIndent"   		選單縮進
                    :defaultSelectedKeys="[$route.path]"  		默認選中的節點
                    :openKeys="openKeys"    		展開的節點
                    mode="inline"   		選單模式
                    :inline-collapsed="collapsed"  		折疊方式
                    @openChange="onOpenChange"
                    @click="menuClick">
                    <!-- 選單遍歷的開始 -->
                    <template v-for="item in menuList">
                        <!-- 如果當前遍歷項沒有children，視為子選單項，注意所有的key都是path用于路由跳轉，以及當前選中記錄 -->
                        <a-menu-item v-if="!item.children" :key="item.menu_url">
                            <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/>
                            <span style="font-size: 15px;">{{ item.menu_name }}</span>
                        </a-menu-item>
                        <!-- 否則視為子選單，傳入選單資訊并且運用下面定義的函式式組件 -->
                        <sub-menu v-else :key="item.menu_url" :menu-info="item" />
                    </template>
                </a-menu>
            </div>
        </a-layout-sider>
        <!-- 內容 -->
        <a-layout-content>
            <router-view></router-view>
        </a-layout-content>
      </a-layout>
</template>

二、定義函式式組件

// 定義函式式組件
const SubMenu = {
  template: `
    <a-sub-menu :key="menuInfo.menu_url" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <i class="iconfont iconshezhiziduan" v-if="menuInfo.menu_name=='系統管理'" style="font-size:18px;margin-right:5px"/>
          <span style="font-size: 15px;">{{ menuInfo.menu_name }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.menu_url">
            <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/>
            <span style="font-size: 15px;">{{ item.menu_name }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.menu_url" :menu-info="item" />
        </template>
    </a-sub-menu>
    `,

三、引入選單組件及接受動態選單資料

import { Menu } from 'ant-design-vue';

name: 'SubMenu',
// true 此項必須被定義
isSubMenu: true,
props: {
  // 解構a-sub-menu的屬性，也就是文章開頭提到的為什么使用函式式組件
  ...Menu.SubMenu.props,
  // 接收父級傳遞過來的選單資訊
  menuInfo: {
    type: Object,
    default: () => ({}),
  },
},

動態選單資料格式如下

// 選單資料
menuList: [
    {
        key:'1',
        title: '系統資訊管理',
        path: '/system_infomation_manage',
        icon:'iconfont iconshezhiziduan',
        children: [
            {
                key:'2',
                title: '專案資訊管理',
                path: '/system_base/system_information',
                icon:''
            },
            {
                key:'3',
                title: '系統組織機構管理',
                path: '/system_base/institul_framework',
                icon:''
            },
            {
                key:'4',
                title: '系統人員管理',
                path: '/system_base/personnel_manage',
                icon:''
            },
            {
                key:'5',
                title: '系統權限管理',
                path: '/system_base/jurisdiction_manage',
                icon:''
            },
            {
                key:'6',
                title:'專案業務字典管理',
                path:'/system_dictionary_management',
                icon:'',
                children:[
                    {
                        key:'6_1',
                        title:'材料設備管理',
                        path:'/dictionary_material_manage',
                        icon:'',
                        children:[
                            {
                                key:'6_1_1',
                                title:'材料管理',
                                path:'/system_base/material_manage',
                                icon:'',
                            },
                            {
                                key:'6_1_2',
                                title:'機械設備管理',
                                path:'/system_base/machine_manage',
                                icon:'',
                            }
                        ]
                    }
                ]
            }
        ]
    }
],

四、定義其他資料

// 選單縮進
inlineIndent:12,
// 默認不折疊
collapsed: false,
// 全部父節點
rootSubmenuKeys: ['/system_infomation_manage'],
openKeys: [],//默認展開的節點
defaultOpenKeys:['/system_infomation_manage'],
// 選中的子選單項
defaultSelectedKeys: [this.$route.path], 

五、所涉及到的方法

methods:{
	//  控制只打開一個
	onOpenChange(openKeys) {
	      // 將當前打開的父級選單存入快取中
	    window.localStorage.setItem('systemOpenKeys', JSON.stringify(openKeys))
	    const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
	    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
	        this.openKeys = openKeys;
	    } else {
	        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
	    }
	},
	// 點擊選單，路由跳轉,注意的是當點擊MenuItem才會觸發此函式
	menuClick({ item, key, keyPath }) {
	    // 獲取到當前的key,并且跳轉
	    this.$router.push({
	        path: key
	    })
	},
},
created(){
    // 將從快取中取出openKeys
    const openKeys = window.localStorage.getItem('systemOpenKeys')
    if(openKeys){
        // 存在即賦值
        this.openKeys = JSON.parse(openKeys)
    }else{
        this.openKeys = ['/system_infomation_manage']
    }
    this.getSystemPermission()
},

這樣，一個完整的動態選單就渲染出來了，最重要的一步就是定義函式式組件，這也是Vue和React框架的重要思想之一，