(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210374875.2 (22)申请日 2022.04.11 (71)申请人 杭州云合智网技 术有限公司 地址 311203 浙江省杭州市萧 山区金城路 39号紫橙国际中心 2号楼12层 (72)发明人 宋蓓蓓　周杉　李贵斌　林晨　 (74)专利代理 机构 上海洞见 未来专利代理有限 公司 31467 专利代理师 王潇 (51)Int.Cl. G06F 3/0482(2013.01) G06F 9/451(2018.01) (54)发明名称 多级菜单导航界面的实现方法 (57)摘要 本发明公开了一种多级菜单导航界面的实 现方法， 包含如下步骤： 获取多级菜单导航界面 的菜单列表； 在多级菜单导航界面中创建横向导 航栏与纵向导航栏； 获取菜单列表中的若干个一 级菜单； 将若干个一级菜单同步至横向导航栏； 获取多级菜 单导航界面当前激活的路由信息； 高 亮显示与路由信息相对应的一级菜 单； 参考路由 信息， 在菜 单列表中获取与高亮显示的一级菜单 相对应的若干个子菜单； 将若干个子菜 单同步至 纵向导航栏； 高亮显示纵向导航栏中的任一子菜 单。 本发明采用横向、 纵向共同显示的菜单展开 方式， 减少了滚动条的使用， 极大的改善了用户 体验。 权利要求书1页 说明书3页 附图2页 CN 114840115 A 2022.08.02 CN 114840115 A 1.一种多 级菜单导 航界面的实现方法， 其特 征在于， 包 含如下步骤： 在多级菜单导 航界面中创建横向导 航栏与纵向导 航栏； 获取所述多级菜单导 航界面的菜单列表； 获取所述菜单列表中的若干个一级菜单； 将所述若干个一级菜单同步至所述横向导 航栏； 获取所述多级菜单导 航界面当前激活的路由信息； 高亮显示与所述路由信息相对应的所述 一级菜单； 参考所述路由信 息， 在所述菜单列表中获取与高亮显示的所述一级菜单相对应的若干 个子菜单； 将所述若干个子菜单同步至所述纵向导 航栏； 高亮显示所述纵向导 航栏中的任一所述子菜单。 2.如权利要求1所述多级菜单导航界面的实现方法， 其特征在于， 高亮显示与 所述路由 信息相对应的所述 一级菜单， 包 含如下子步骤： 获取所述多级菜单导 航界面的当前路由实例router； 将包裹所述一级菜单的  el‑menu组件的  default‑active属性设置为router.curren tRoute.value.matc hed[0].path 。 3.如权利要求2所述多级菜单导航界面的实现方法， 其特征在于， 参考所述路由信息， 在所述菜单列表中获取与高亮显示的所述一级菜单相对应的若干个子菜单， 包含如下子步 骤： 遍历所述菜单列表， 获取path属性为router.currentRoute.value.matched[0].path 的所述一级菜单； 在所述菜单列表中获取与path属性为router.currentRoute.value.matched[0].path 的所述一级菜单对应的若干个子菜单。 4.如权利要求1所述多级菜单导航界面的实现方法， 其特征在于， 高亮显示所述纵向导 航栏中的任一所述子菜单， 包 含如下子步骤： 将包裹所述纵向导航栏的 “el‑menu”组件的default ‑active属 性设置为router.curr entRoute.value.matc hed[router.cur rentRoute.value.matc hed.length ‑  1].path； 参考所述路由信 息， 高亮显示被选 中的所述子菜单， 当所述若干个子菜单未被选 中时， 默认高亮显示第一个所述子菜单。 5.如权利要求1所述多级菜单导航界面的实现方法， 其特征在于， 应用递归算法在所述 菜单列表中获取与高亮显示的所述 一级菜单相对应的若干个子菜单。权　利　要　求　书 1/1 页 2 CN 114840115 A 2多级菜单导航界面的实现方 法 技术领域 [0001]本发明涉及计算机截面 技术领域， 特别涉及一种多 级菜单导 航界面的实现方法。 背景技术 [0002]对于大多数业务功能复杂的网站， 需要多级层叠式的菜单去实现导航功能。 目前 导航式菜 单主要有两种， 一种是横向导航菜单， 点击一级菜单后， 再逐级去选择其下面的子 菜单； 另一种是纵向导 航菜单， 每级菜单 可收缩， 可折叠 。 [0003]横向导航菜单， 不能一眼看到当前所在页面的子菜单， 只能通过点击当前高亮的 父级菜单， 一层一层去查看， 影响用户体验； 纵向导航菜单， 当菜单层 级较多时， 会导致导航 栏宽度过大， 为此需要增加 安装横向的滚动条， 当菜单总数比较多时， 菜单纵向高度过高， 还需增加安装纵向的滚动条操作菜单， 使用者通过拖动滚动条来选择菜单， 操作步骤繁琐， 影响用户体验。 [0004] 发明内容 [0005]根据本发明实施例， 提供了一种多 级菜单导 航界面的实现方法， 包 含如下步骤： 在多级菜单导 航界面中创建横向导 航栏与纵向导 航栏； 获取多级菜单导 航界面的菜单列表； 获取菜单列表中的若干个一级菜单； 将若干个一级菜单同步至横向导 航栏； 获取多级菜单导 航界面当前激活的路由信息； 高亮显示与路由信息相对应的一级菜单； 参考路由信息， 在菜单列表中获取与高亮显示的一级菜单相对应的若干个子菜 单； 将若干个子菜单同步至纵向导 航栏； 高亮显示纵向导 航栏中的任一子菜单。 [0006]进一步， 高亮显示与路由信息相对应的一级菜单， 包 含如下子步骤： 获取多级菜单导 航界面的当前路由实例router； 将包裹一级菜单的  el‑menu组件的  default‑active属性设置为router.curren tRoute.value.matc hed[0].path 。 [0007]进一步， 参考路由信息， 在菜单列表中获取与高亮显示的一级菜单相对应的若干 个子菜单， 包 含如下子步骤： 遍历菜单列表， 获取path属性为router.currentRoute.value.matched[0].path 的一级菜单； 在菜单列表中获取与path属性为r outer.currentRoute.value.matched[0].path 的一级菜单对应的若干个子菜单。说　明　书 1/3 页 3 CN 114840115 A 3