Ant Design Vue 实现菜单栏根据url变化自动高亮和展开
转载于:
https://blog.csdn.net/qq_35069272/article/details/104990576
以下是我根据自己的情况作了适当的修改:
实现的功能:
- 刷新后保持菜单选中
- 当从一个页面 push到另一个页面时,页面跳转,对应的菜单高亮
- 浏览器输入url后,页面跳转,对应的菜单高亮
<template> <a-layout id="layout" style="min-height: 100vh"> <a-layout-sider v-model="collapsed" collapsible> <a-menu theme="dark" :openKeys="openKeys" // 重点: 当前展开的菜单 @openChange="onOpenChange" // 重点: 当可以展开的菜单被点击时 v-model="SelectedKeys" // 选中的菜单 mode="inline"> <template v-for="item in menuItems"> <!-- 有二级菜单的一级菜单 --> <a-sub-menu v-if="item.children && item.is_active" :key="item.id"> <span slot="title"> <a-icon :type="item.icon" /><span>{{ item.name }}</span> </span> <!-- 二级菜单 --> <template v-for="subItem in item.children"> <a-menu-item v-if="subItem.is_active" :key="subItem.path" :index="subItem.path"> <router-link :to="{ path: subItem.path }"> <a-icon v-if="subItem.icon" :type="subItem.icon" /> <span>{{ subItem.name }}</span> </router-link> </a-menu-item> </template> </a-sub-menu> <!--没有二级菜单的一级菜单--> <a-sub-menu v-if="!item.children && item.is_active" :key="item.id + ''"> <span slot="title"> <a-icon :type="item.icon" /><span>{{ item.name }}</span> </span> </a-sub-menu> </template> </a-menu> </a-layout-sider> <a-layout> </a-layout> </a-layout> </template> <script> import { MenuTree } from '@/api/rbac' export default { data () { return { SelectedKeys: [this.$route.path], openKeys: [], menuItems: [], submenu: [], } }, // 通过结果从后端获取菜单 // 成功后的格式为 // [ // { // "id": 2, // "name": "系统管理", // "icon": "setting", // "path": "", // "is_active": true, // "sort": 2, // "pid": null, // "children": [ // { // "id": 3, // "name": "用户管理", // "icon": "user", // "path": "/user/manage", // "is_active": true, // "sort": 1, // "pid": 2 // }, // ] // } // ] async created () { await MenuTree().then(res => { this.menuItems = res for (const item of res) { if (item.children) { for (const subitem of item.children) { if (subitem.path === this.$route.path) { this.openKeys = [subitem.pid] // 此时this.openKeys为父菜单的id(因为父菜单key为:key="item.id"),此时当在浏览器输入url时,会展开此子菜单的父菜单 } } } } }) }, watch: { '$route.path': function () { this.SelectedKeys = [this.$route.path] // 此处监听路由变化,是当push跳转时,是跳转后url的菜单高亮 } }, methods: { onOpenChange (openKeys) { // 当菜单被展开时触发此处 /* 经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组 点击未展开的菜单时传入的是【当前展开菜单的key,点击的菜单key】 下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0 */ if (openKeys.length !== 0) { this.openKeys = [openKeys[1]] } else { this.openKeys = [''] } } }, } </script> <style> </style>