基于蚂蚁⾦服AntDesignVue-Menu导航菜单实现根据初始路由⾃动选中对应菜单解决。
基于实现根据初始路由⾃动选定对应菜单，其实官⽅已经做了原⽣实现，但是VUE版本需要⾃⼰实现。
功能：刷新或直接打开某路径时，⾃动根据路由选中当前路由对应的菜单⽀持根⽬录(/)匹配规则可以⾃定义，即使同样的path下对应多个菜单也可以，总之，只要Vue路由能正确导航就能正确匹配（判断是否选中时使⽤模拟导航）注意：由于vue2和vue3版本有差异，并且同⼀份代码兼容两个版本会使得代码冗余且难维护，因此争对两个版本的vue分别提供由于逻辑复杂故采⽤TypeScript做类型声明，如果没有使⽤TypeScript的项⽬，可以把类容保存为".jsx"后缀，并且去除相关的类型声明即可具体部分⽤法参见源码最前⾯的⽂档注释部分，完整⽤法可以参考源码中的 MenuOption 类型。
具体导航到哪⾥ MenuOption.routerNavigation.location（RawLocation，原⽣VUE路由对象）决定，也可以使⽤⾃定义事件进⾏导航。
源码，vue2.x版本(可去除ts类型声明后保存为.jsx) - menu.tsximport Vue, { VNode } from 'vue'import { RawLocation } from 'vue-router/types/router'import { Route } from 'vue-router'/*** 申明式嵌套菜单导航.* 官⽅⽂档: https:///components/menu-cn/#API* <a-menu>* <MenuItem>菜单项</MenuItem>* <a-sub-menu title="⼦菜单">* <MenuItem>⼦菜单项</MenuItem>* </a-sub-menu>* </a-menu>* 根据提供的数据进⾏菜单渲染.* <p>* ⽰例:* <pre><code>* import Menu, { MenuOption } from '@/components/menu'** const menus: Array<MenuOption> = [* {* // 菜单名称,⽤于显⽰* name: '菜单1',* // [可选]⽤于⾃动导航和判断当前路由与当前菜单是否匹配,以实现刷新⾃动选中或菜单组⾃动展开(如果不需要则建议使⽤原⽣组件)* routerNavigation: {* // 是否⾃动导航,如果开启则会⾃动根据{@code location}值进⾏导航.默认开启* autoNavigation: true,* // 该属性类型为Vue原⽣导航参数类型(RawLocation)* location: { name: 'Login' }* }* },* {* name: '菜单组',* children: [* {* name: '菜单2',* routerNavigation: {* location: '/reg'* },* // 还可以为菜单项添加原⽣事件* on: {* click: () => {}* }* },* {* name: '菜单3',* routerNavigation: {* location: { path: '/reg2' }* }* }* ]* }* ];** // template中使⽤(不要忘记在components中导⼊): <Menu mode="inline" :menus="menus"></Menu>* </pre></code>* 如⽰例所⽰,只要使⽤时申明需要显⽰的菜单名字以及该菜单导航所需的对象即可(该对象默认⽤于导航已经⾃动根据当前路由进⾏⾼亮) * 但是可以禁⽤⾃动导航功能.并可以⾃定义菜单的点击事件* 如果不需要⾃动根据当前路由进⾏⾼亮和展开,请直接使⽤原⽣组件即可.* </p>* @author Laeni<m@>*/export default Vue.extend({name: 'Menu',props: {/*** 需要进⾏渲染的菜单,* 类型为{@link MenuOption}.*/menus: {type: Array,required: true},/*** 菜单类型* ⽔平: vertical vertical-right* 垂直: horizontal* 内嵌: inline*/mode: {type: String,default: ''},/*** 主题.* 详情参考官⽹: https:///components/menu-cn/#components-menu-demo-menu-themes* light dark*/theme: {type: String,default: ''},/*** 事件.* 如* {* click: () => {},* }*/on: {type: Object,default: () => {}},},data(): {// this.menus的扩展,⽅便使⽤menuOptionLocals: Array<MenuOptionLocal>,// 菜单展开的分组openKeys: Array<string>,// 菜单选中的菜单项selectedKeys: Array<string>} {return {menuOptionLocals: [],// 菜单展开的分组openKeys: [],// 菜单选中的菜单项selectedKeys: []}},methods: {/*** 初始化菜单选中状态.* <p>* 功能:* <ul>* <li>当路由改变时计算出路由对应的菜单,并选中</li>* <li>如果选择的菜单在菜单组中,则将该组展开</li>* </ul>* </p>*/initMenu(): void {// 从{@code this.menuOptionLocals}中将找出与当前路由相符的选项const menuOptionLocal: MenuOptionLocal | null = this.findMenuOptionLocal(this.menuOptionLocals, this.$route);if (menuOptionLocal !== null) {// 设置当前选择的keythis.selectedKeys = [menuOptionLocal.key];// 依次将当前菜单所在的⽗菜单展开this.openKeying(menuOptionLocal);}},/*** 渲染菜单项或菜单组.* @param menu 单个MenuOption类型的对象*/renderMenu(menu: MenuOptionLocal): VNode {if (menu.children && menu.children.length > 0) {return this.renderSubMenu(menu);} else {return this.renderMenuItem(menu);}},// 渲染菜单组renderSubMenu(menu: MenuOptionLocal): VNode {const props = {key: menu.key,title: ,}return (<a-sub-menu key={ menu.key } {...{ props }}>{ menu.children && menu.children.map(v => this.renderMenu(v)) }</a-sub-menu>);},// 渲染菜单项renderMenuItem(menu: MenuOptionLocal): VNode {const props = {disabled: menu.disabled}const on = {...menu.on,// 注⼊点击事件click: () => {// 原始事件if (menu.on && typeof menu.on.click === 'function') {menu.on.click();}// 如果配置了⾃动导航,则根据配置规则进⾏点击时⾃动导航if (menu.routerNavigation && (menu.routerNavigation.autoNavigation || menu.routerNavigation.autoNavigation === undefined)) { // 导航到指定路由(如果当前路由处于⽬标路由则不进⾏导航)if (this.$router.resolve(menu.routerNavigation.location).route.fullPath !== this.$route.fullPath) {this.$router.push(menu.routerNavigation.location);}}}}return (<a-menu-item key={ menu.key } {...{ props, on }}>{ }</a-menu-item>);},/*region private*//*** 根据菜单的层次结构⾃动⽣成该菜单下唯⼀的 key.* 添加该元素的⽗元素(如果有).* @param menus 需要⽣产key则菜单.* @param parent [递归调⽤时使⽤]⽗节点*/toMenuOptionLocal(menus: Array<MenuOption>, parent?: MenuOptionLocal): Array<MenuOptionLocal> { // 默认key前缀,如果⽗元素为空则使⽤,⽤于⽗元素const defaultPrefix = 'k';const menuLocals: Array<MenuOptionLocal> = [];menus.forEach((v, i) => {const menuLocal: MenuOptionLocal = {...v,children: undefined,key: (parent ? parent.key : defaultPrefix) + '-' + i,parent: parent,};// ⽣成⼦节点的keyif (v.children && v.children.length > 0) {menuLocal.children = this.toMenuOptionLocal(v.children, menuLocal);}// 如果可以导航则⽣成导航对象if (v.routerNavigation && v.routerNavigation.location) {menuLocal.route = this.$router.resolve(v.routerNavigation.location).route;}menuLocals.push(menuLocal);})return menuLocals;},/*** 从{@code this.menuOptionLocals}中将找出与当前路由相符的选项.* @param menuOptionLocals 菜单选项* @param route 当前路由对象* @return MenuOptionLocal 如果没有找到则返回null*/findMenuOptionLocal(menuOptionLocals: Array<MenuOptionLocal>, route: Route): MenuOptionLocal | null { // 从节点树中找出所有符合要求的节点const menuOptionLocalAll: Array<MenuOptionLocal> = this.findMenuOptionLocalAll(menuOptionLocals, route);// 从所有符合要求的节点中找出优先级最⾼的⼀个节点(如"/xxx"优先级⾼于"/")const high = this.findHighPriority(menuOptionLocalAll);// 对⾸页进⾏特殊处理if (high) {// 如果 high ⼀定不满⾜要求则跳过if (!high.routerNavigation || !high.routerNavigation.location) {return null;}const highRoute: Route = high.route || this.$router.resolve(high.routerNavigation.location).route;const homeRoute: Route = this.$router.resolve({ name: 'Home' }).route;if (highRoute.fullPath !== route.fullPath && highRoute.fullPath === homeRoute.fullPath) {return null;}}return high;},/*** 从{@code this.menuOptionLocals}中将找出与当前路由相符的<b>所有</b>选项.* @param menuOptionLocals 菜单选项* @param route 当前路由对象* @return Array<MenuOptionLocal> 返回0个或多个菜单项数组*/findMenuOptionLocalAll(menuOptionLocals: Array<MenuOptionLocal>, route: Route): Array<MenuOptionLocal> { // ⽤于放满⾜要求的选项节点const menuOptionLocalAll: Array<MenuOptionLocal> = [];for (const menu of menuOptionLocals) {// 如果有⼦元素则先找⼦元素if (menu.children && menu.children.length > 0) {const menuOptionLocal: MenuOptionLocal | null = this.findMenuOptionLocal(menu.children, route);if (menuOptionLocal) {menuOptionLocalAll.push(menuOptionLocal);}}// 如果不是⼦元素则判断当前元素是否为⽬标元素else if (menu.routerNavigation && menu.routerNavigation.location) {// 利⽤Vue模拟解析⽣成⼀个路由对象const resolveRoute: Route = menu.route || this.$router.resolve(menu.routerNavigation.location).route;// 通过⽐较{@link Route#path}和{@link Route#query}以判断该菜单是否为⽬标菜单if (route.path.indexOf(resolveRoute.path) > -1) {// 定义⼀个变量假设本元素符合要求,如果不符合则改为falselet ok: boolean = true;for (const key of Object.keys(resolveRoute.query)) {if (resolveRoute.query[key] && resolveRoute.query[key] !== route.query[key]) {ok = false;break;} else if (typeof route.query[key] === 'undefined') {ok = false;break;}}if (ok) {menuOptionLocalAll.push(menu);}}}}return menuOptionLocalAll;},// 从所有符合要求的节点中找出优先级最⾼的⼀个节点(如"/xxx"优先级⾼于"/")findHighPriority(menuOptionLocals: Array<MenuOptionLocal>): MenuOptionLocal | null {if (menuOptionLocals.length === 0) {return null;}// 假定第⼀个元素优先级最⾼let high: MenuOptionLocal = menuOptionLocals[0];// 通过path进⾏⽐较for (let i = 1; i < menuOptionLocals.length; i++) {const menu = menuOptionLocals[i];// 如果 high 或 menu ⼀定不满⾜要求则跳过if (!high.routerNavigation || !high.routerNavigation.location || !menu.routerNavigation || !menu.routerNavigation.location) { high = menu;continue;}// 利⽤Vue模拟解析⽣成⼀个路由对象const highRoute: Route = high.route || this.$router.resolve(high.routerNavigation.location).route;const menuRoute: Route = menu.route || this.$router.resolve(menu.routerNavigation.location).route;// 优先级⽐较if (menuRoute.path.indexOf(highRoute.path) > -1) {high = menu;}}return high;},/*** 依次将当前菜单所在的⽗菜单展开.* @param menuOptionLocal 当前url导航对应的菜单.*/openKeying(menuOptionLocal: MenuOptionLocal): void {if (menuOptionLocal.parent) {this.openKeys.push(menuOptionLocal.parent.key);this.openKeying(menuOptionLocal.parent);}}/*endregion*/},created(): void {// @ts-ignorethis.menuOptionLocals = this.toMenuOptionLocal(this.menus);},mounted(): void {this.initMenu();},render(): VNode {const props: any = {openKeys: this.openKeys,selectedKeys: this.selectedKeys,}if (this.mode) {props.mode = this.mode;}if (this.theme) {props.theme = this.theme;}const on: any = {// 同步展开或关闭时的标签openChange: (openKeys: never[]) => this.openKeys = openKeys,// select: (item: any) => this.selectedKeys = item.selectedKeys,}return (<a-menu {...{props, on}}>{this.menuOptionLocals.map((menu) => this.renderMenu(menu))}</a-menu>);},watch: {$route() {this.initMenu();},menus() {// @ts-ignorethis.menuOptionLocals = this.toMenuOptionLocal(this.menus);this.initMenu();}},})/*** 菜单组或菜单项.* 如果{@link #children}为空则表⽰菜单项(⽗菜单),否则为菜单.*/export interface MenuOption {/*** 菜单或菜单项的名字.*/name: string;/*** 路由导航规则,为菜单项(children 未定义或 children.length === 0)时有效.* 根据路由动态选中该菜单,可以根据该定义的判断在当前路由下是否应该选择该菜单.*/routerNavigation?: {/*** 是否根据定义的结构进⾏⾃动导航.* 即点击时⾃动导航到声明的路由中.如果在复杂条件不能⾃动导航时,可禁⽤,并且添加{@link MenuOption#on}相关事件进⾏⾃定义导航. * 如"/xxx?a=1&b=2"中,仅仅依据path"/xxx"和查询参数"a=1"作为是否选中的判断依据,但是查询参数"b=2"不作为判断依据时,* 应该在这⾥不定义查询参数"b=2"这个条件,所以不能⾃动获取并传递该参数,这个时候应该禁⽤⾃动导航.*/autoNavigation?: boolean;/*** Vue路由导航参数.其作⽤最多有两个.* 1.点击时⾃动导航({@link #autoNavigation}为{@code undefined}或为{@code true}时有效.)* 2.⾃动根据其定义的类容判断是否应该选中该菜单.*/location: RawLocation;};/*** ⼦菜单组或者⼦菜单项.* 如果为空则本菜单表⽰菜单组(⽗菜单),否则为菜单项*/children?: Array<MenuOption>;/*** 菜单或菜单项logo图标(TODO 暂未实现, 可为框架的图标名或阿⾥⽮量图标库的名称).*/logo?: string;/*** Menu.Item事件(html原⽣事件),为菜单项(children.length > 0)时有效.*/on?: any;/*** 是否禁⽤.*/disabled?: boolean;}/*** 仅供本组件使⽤的扩展*/interface MenuOptionLocal extends MenuOption {/*** 菜单组合菜单项的唯⼀标识,⽤于框架组件菜单设置选中状态与展开状态.*/key: string;/*** ⼦菜单或者⼦菜单项.* 如果为空则表⽰菜单项(⽗菜单),否则为菜单*/children?: Array<MenuOptionLocal>;/*** 如果该菜单项⽗元素,则该属性为其⽗元素,⽅便反向遍历.*/parent?: MenuOptionLocal;/*** 本组件对应的路由对象.*/route?: Route;}View Code源码，vue3.x版本(可去除ts类型声明后保存为.jsx) - menu.tsximport { VNode, defineComponent, PropType } from 'vue'import { RouteLocationRaw } from 'vue-router'import { RouteLocation } from 'vue-router'/*** 申明式嵌套菜单导航.* 官⽅⽂档: https:///components/menu-cn/#API* <a-menu>* <MenuItem>菜单项</MenuItem>* <a-sub-menu title="⼦菜单">* <MenuItem>⼦菜单项</MenuItem>* </a-sub-menu>* </a-menu>* 根据提供的数据进⾏菜单渲染.* <p>* ⽰例:* <pre><code>* import Menu, { MenuOption } from '@/components/menu'** const menus: Array<MenuOption> = [* {* // 菜单名称,⽤于显⽰* name: '菜单1',* // [可选]⽤于⾃动导航和判断当前路由与当前菜单是否匹配,以实现刷新⾃动选中或菜单组⾃动展开(如果不需要则建议使⽤原⽣组件) * routerNavigation: {* // 是否⾃动导航,如果开启则会⾃动根据{@code location}值进⾏导航.默认开启* autoNavigation: true,* // 该属性类型为Vue原⽣导航参数类型(RouteLocationRaw)* location: { name: 'Login' }* }* },* {* name: '菜单组',* children: [* {* name: '菜单2',* routerNavigation: {* location: '/reg'* },* // 还可以为菜单项添加原⽣事件* on: {* click: () => {}* }* },* {* name: '菜单3',* routerNavigation: {* location: { path: '/reg2' }* }* }* ]* }* ];** // template中使⽤(不要忘记在components中导⼊): <Menu mode="inline" :menus="menus"></Menu>* </pre></code>* 如⽰例所⽰,只要使⽤时申明需要显⽰的菜单名字以及该菜单导航所需的对象即可(该对象默认⽤于导航已经⾃动根据当前路由进⾏⾼亮) * 但是可以禁⽤⾃动导航功能.并可以⾃定义菜单的点击事件* 如果不需要⾃动根据当前路由进⾏⾼亮和展开,请直接使⽤原⽣组件即可.* </p>* @author Laeni<m@>*/export default defineComponent({name: 'Menu',props: {/*** 需要进⾏渲染的菜单,* 类型为{@link MenuOption}.*/menus: {type: Array as PropType<Array<MenuOption>>,required: true},/*** 菜单类型* ⽔平: vertical vertical-right* 垂直: horizontal* 内嵌: inline*/mode: {type: String,default: ''},/*** 主题.* 详情参考官⽹: https:///components/menu-cn/#components-menu-demo-menu-themes* light darktheme: {type: String,default: 'light'},/*** 事件.* 如* {* click: () => {},* }*/on: {type: Object,default: () => {// do nothing.}},},data() {return {menuOptionLocals: [],// 菜单展开的分组openKeys: [],// 菜单选中的菜单项selectedKeys: []} as {// this.menus的扩展,⽅便使⽤menuOptionLocals: Array<MenuOptionLocal>;// 菜单展开的分组openKeys: Array<string>;// 菜单选中的菜单项selectedKeys: Array<string>;}},methods: {/*** 初始化菜单选中状态.* <p>* 功能:* <ul>* <li>当路由改变时计算出路由对应的菜单,并选中</li>* <li>如果选择的菜单在菜单组中,则将该组展开</li>* </ul>* </p>*/initMenu(): void {// 从{@code this.menuOptionLocals}中将找出与当前路由相符的选项const menuOptionLocal: MenuOptionLocal | null = this.findMenuOptionLocal(this.menuOptionLocals, this.$route);if (menuOptionLocal !== null) {// 设置当前选择的keythis.selectedKeys = [menuOptionLocal.key];// 依次将当前菜单所在的⽗菜单展开this.openKeying(menuOptionLocal);}},/*** 渲染菜单项或菜单组.* @param menu 单个MenuOption类型的对象*/renderMenu(menu: MenuOptionLocal): VNode {if (menu.children && menu.children.length > 0) {return this.renderSubMenu(menu);} else {return this.renderMenuItem(menu);}},// 渲染菜单组renderSubMenu(menu: MenuOptionLocal): VNode {return (<a-sub-menu key={ menu.key } title={}>{ menu.children && menu.children.map(v => this.renderMenu(v)) }</a-sub-menu>);},// 渲染菜单项renderMenuItem(menu: MenuOptionLocal): VNode {// 注⼊点击事件const click = () => {// 原始事件if (menu.on && typeof menu.on.click === 'function') {menu.on.click();// 如果配置了⾃动导航,则根据配置规则进⾏点击时⾃动导航if (menu.routerNavigation && (menu.routerNavigation.autoNavigation || menu.routerNavigation.autoNavigation === undefined)) { // 导航到指定路由(如果当前路由处于⽬标路由则不进⾏导航)if (this.$router.resolve(menu.routerNavigation.location).fullPath !== this.$route.fullPath) {this.$router.push(menu.routerNavigation.location);}}}return (<a-menu-item key={ menu.key } disabled={menu.disabled} onClick={click} on={menu.on}>{ }</a-menu-item>);},/*region private*//*** 根据菜单的层次结构⾃动⽣成该菜单下唯⼀的 key.* 添加该元素的⽗元素(如果有).* @param menus 需要⽣产key则菜单.* @param parent [递归调⽤时使⽤]⽗节点*/toMenuOptionLocal(menus: Array<MenuOption>, parent?: MenuOptionLocal): Array<MenuOptionLocal> { // 默认key前缀,如果⽗元素为空则使⽤,⽤于⽗元素const defaultPrefix = 'k';const menuLocals: Array<MenuOptionLocal> = [];menus.forEach((v, i) => {const menuLocal: MenuOptionLocal = {...v,children: undefined,key: (parent ? parent.key : defaultPrefix) + '-' + i,parent: parent,};// ⽣成⼦节点的keyif (v.children && v.children.length > 0) {menuLocal.children = this.toMenuOptionLocal(v.children, menuLocal);}// 如果可以导航则⽣成导航对象if (v.routerNavigation && v.routerNavigation.location) {menuLocal.route = this.$router.resolve(v.routerNavigation.location);}menuLocals.push(menuLocal);})return menuLocals;},/*** 从{@code this.menuOptionLocals}中将找出与当前路由相符的选项.* @param menuOptionLocals 菜单选项* @param route 当前路由对象* @return MenuOptionLocal 如果没有找到则返回null*/findMenuOptionLocal(menuOptionLocals: Array<MenuOptionLocal>, route: RouteLocation): MenuOptionLocal | null { // 从节点树中找出所有符合要求的节点const menuOptionLocalAll: Array<MenuOptionLocal> = this.findMenuOptionLocalAll(menuOptionLocals, route);// 从所有符合要求的节点中找出优先级最⾼的⼀个节点(如"/xxx"优先级⾼于"/")const high = this.findHighPriority(menuOptionLocalAll);// 对⾸页进⾏特殊处理if (high) {// 如果 high ⼀定不满⾜要求则跳过if (!high.routerNavigation || !high.routerNavigation.location) {return null;}const highRoute: RouteLocation = high.route || this.$router.resolve(high.routerNavigation.location);const homeRoute: RouteLocation = this.$router.resolve({ name: 'Home' });if (highRoute.fullPath !== route.fullPath && highRoute.fullPath === homeRoute.fullPath) {return null;}}return high;},/*** 从{@code this.menuOptionLocals}中将找出与当前路由相符的<b>所有</b>选项.* @param menuOptionLocals 菜单选项* @param route 当前路由对象* @return Array<MenuOptionLocal> 返回0个或多个菜单项数组*/findMenuOptionLocalAll(menuOptionLocals: Array<MenuOptionLocal>, route: RouteLocation): Array<MenuOptionLocal> { // ⽤于放满⾜要求的选项节点const menuOptionLocalAll: Array<MenuOptionLocal> = [];for (const menu of menuOptionLocals) {// 如果有⼦元素则先找⼦元素if (menu.children && menu.children.length > 0) {const menuOptionLocal: MenuOptionLocal | null = this.findMenuOptionLocal(menu.children, route);if (menuOptionLocal) {menuOptionLocalAll.push(menuOptionLocal);}}// 如果不是⼦元素则判断当前元素是否为⽬标元素else if (menu.routerNavigation && menu.routerNavigation.location) {// 利⽤Vue模拟解析⽣成⼀个路由对象const resolveRoute: RouteLocation = menu.route || this.$router.resolve(menu.routerNavigation.location);// 通过⽐较{@link RouteLocation#path}和{@link RouteLocation#query}以判断该菜单是否为⽬标菜单if (route.path.indexOf(resolveRoute.path) > -1) {// 定义⼀个变量假设本元素符合要求,如果不符合则改为falselet ok = true;for (const key of Object.keys(resolveRoute.query)) {if (resolveRoute.query[key] && resolveRoute.query[key] !== route.query[key]) {ok = false;break;} else if (typeof route.query[key] === 'undefined') {ok = false;break;}}if (ok) {menuOptionLocalAll.push(menu);}}}}return menuOptionLocalAll;},// 从所有符合要求的节点中找出优先级最⾼的⼀个节点(如"/xxx"优先级⾼于"/")findHighPriority(menuOptionLocals: Array<MenuOptionLocal>): MenuOptionLocal | null {if (menuOptionLocals.length === 0) {return null;}// 假定第⼀个元素优先级最⾼let high: MenuOptionLocal = menuOptionLocals[0];// 通过path进⾏⽐较for (let i = 1; i < menuOptionLocals.length; i++) {const menu = menuOptionLocals[i];// 如果 high 或 menu ⼀定不满⾜要求则跳过if (!high.routerNavigation || !high.routerNavigation.location || !menu.routerNavigation || !menu.routerNavigation.location) { high = menu;continue;}// 利⽤Vue模拟解析⽣成⼀个路由对象const highRoute: RouteLocation = high.route || this.$router.resolve(high.routerNavigation.location);const menuRoute: RouteLocation = menu.route || this.$router.resolve(menu.routerNavigation.location);// 优先级⽐较if (menuRoute.path.indexOf(highRoute.path) > -1) {high = menu;}}return high;},/*** 依次将当前菜单所在的⽗菜单展开.* @param menuOptionLocal 当前url导航对应的菜单.*/openKeying(menuOptionLocal: MenuOptionLocal): void {if (menuOptionLocal.parent) {this.openKeys.push(menuOptionLocal.parent.key);this.openKeying(menuOptionLocal.parent);}}/*endregion*/},created(): void {this.menuOptionLocals = this.toMenuOptionLocal(this.menus);},mounted(): void {this.initMenu();},render(): VNode {return (<a-menu theme={this.theme} mode={this.mode} openKeys={this.openKeys} selectedKeys={this.selectedKeys}onOpenChange={(openKeys: string[]) => this.openKeys = openKeys}>{this.menuOptionLocals.map((menu) => this.renderMenu(menu))}</a-menu>);},watch: {$route() {this.initMenu();},menus() {this.menuOptionLocals = this.toMenuOptionLocal(this.menus);this.initMenu();}},})/*** 菜单组或菜单项.* 如果{@link #children}为空则表⽰菜单项(⽗菜单),否则为菜单.*/export interface MenuOption {/*** 菜单或菜单项的名字.*/name: string;/*** 路由导航规则,当菜单项(children 未定义或 children.length === 0)时有效.* 根据路由动态选中该菜单,可以根据该定义的判断在当前路由下是否应该选择该菜单.*/routerNavigation?: {/*** 是否根据定义的结构进⾏⾃动导航.* 即点击时⾃动导航到声明的路由中.如果在复杂条件不能⾃动导航时,可禁⽤,并且添加{@link MenuOption#on}相关事件进⾏⾃定义导航. * 如"/xxx?a=1&b=2"中,仅仅依据path"/xxx"和查询参数"a=1"作为是否选中的判断依据,但是查询参数"b=2"不作为判断依据时,* 应该在这⾥不定义查询参数"b=2"这个条件,所以不能⾃动获取并传递该参数,这个时候应该禁⽤⾃动导航.*/autoNavigation?: boolean;/*** Vue路由导航参数.其作⽤最多有两个.* 1.点击时⾃动导航({@link #autoNavigation}为{@code undefined}或为{@code true}时有效.)* 2.⾃动根据其定义的类容判断是否应该选中该菜单.*/location: RouteLocationRaw;};/*** ⼦菜单组或者⼦菜单项.* 如果为空则本菜单表⽰菜单组(⽗菜单),否则为菜单项*/children?: Array<MenuOption>;/*** 菜单或菜单项logo图标(TODO 暂未实现, 可为框架的图标名或阿⾥⽮量图标库的名称).*/logo?: string;/*** Menu.Item事件(html原⽣事件),为菜单项(children.length > 0)时有效.*/on?: any;/*** 是否禁⽤.*/disabled?: boolean;}/*** 仅供本组件使⽤的扩展*/interface MenuOptionLocal extends MenuOption {/*** 菜单组合菜单项的唯⼀标识,⽤于框架组件菜单设置选中状态与展开状态.*/key: string;/*** ⼦菜单或者⼦菜单项.* 如果为空则表⽰菜单项(⽗菜单),否则为菜单*/children?: Array<MenuOptionLocal>;/*** 如果该菜单项⽗元素,则该属性为其⽗元素,⽅便反向遍历. */parent?: MenuOptionLocal;/*** 本组件对应的路由对象.*/route?: RouteLocation;}View Code。
