Ant Design Vue 实现菜单栏根据url变化自动高亮和展开
转载于:
https://blog.csdn.net/qq_35069272/article/details/104990576
以下是我根据自己的情况作了适当的修改:
实现的功能:
- 刷新后保持菜单选中
- 当从一个页面 push到另一个页面时,页面跳转,对应的菜单高亮
- 浏览器输入url后,页面跳转,对应的菜单高亮
"layout" style="min-height: 100vh"> "collapsed" collapsible> menu theme="dark" :openKeys="openKeys" // 重点: 当前展开的菜单 @openChange="onOpenChange" // 重点: 当可以展开的菜单被点击时 v-model="SelectedKeys" // 选中的菜单 mode="inline"> for="item in menuItems"> if="item.children && item.is_active" :key="item.id"> "title"> "item.icon" />{{ item.name }} for="subItem in item.children"> if="subItem.is_active" :key="subItem.path" :index="subItem.path"> "{ path: subItem.path }"> if="subItem.icon" :type="subItem.icon" /> {{ subItem.name }} if="!item.children && item.is_active" :key="item.id + ''"> "title"> "item.icon" />{{ item.name }}