导航菜单根据切换的页面高亮对应的菜单

技术栈：vue + ant design vue

期望： 使用ant design vue组件库中的menu渲染项目中的菜单项，当点击某个菜单项的时候展示相应的页面并高亮当前点击的菜单项(文字变蓝+背景样式)

问题： 当我点击标签页导致页面切换的时候，菜单则无法对应切换，或者刷新页面的时候就会导致左侧菜单的重置，无法继续根据展示的页面高亮对应的菜单

菜单切换代码：

<a-menu-item key="role">
   	<template #icon>
     	<img src="@/assets/images/Tree/setting-user.png">
   	</template>
  	<router-link to="role">角色管理</router-link>
</a-menu-item>
<a-menu-item key="datagroup">
   	<template #icon>
     	 <img src="@/assets/images/Tree/setting-user.png">
    </template>
    <router-link to="datagroup">数据组管理</router-link>
</a-menu-item>
<a-menu-item key="flow">
    <template #icon>
         <img src="@/assets/images/Tree/setting-userS.png">
    </template>
    <router-link to="flow">流程管理</router-link>
</a-menu-item>

​ 当切换标签页或者刷新页面的时候(没有点击菜单切换组件)，菜单的文字高亮蓝色是正常对应展示的组件高亮对应的菜单，但是菜单的背景样式无法跟随一起联动

解决思路：

​ 由于切换标签页(非菜单)的时候切换组件页面，文字是对应高亮蓝色：文字 <router-link to="flow">流程管理</router-link>是在菜单a-menu-item中包裹的，在这里文字对应切换是因为我在菜单中，使用router-link路由来去对应定义的切换组件的文字，所以文字会根据页面的切换对应高亮。根据文字去寻找文字所在的父级的menu菜单，为menu菜单设置样式来实现根据组件切换对应高亮菜单。

设置高亮：

// 文字高亮
.ant-menu-title-content > .router-link-exact-active {
  font-weight: 600;
  color: #0273c4 !important;
}

使用css中的:has来去寻找一个元素的父元素

.ant-menu-item:has(> .ant-menu-title-content > .router-link-exact-active) {
  border-radius: 100px 14px 14px 100px;
  background-image: linear-gradient(270deg, #d5e5f7 4%, #ffffff 64%);
  position: relative;
  // background-repeat: no-repeat;
  overflow: hidden;
}

此时，就实现了菜单根据切换的组件对应高亮，其他的组件库同理。

总结：在menu菜单中使用router-link定义切换组件的文字，组件切换对应的router-link包裹的文字会新增类.ant-menu-title-content .router-link-exact-active，从该类使用css中的:has去寻找它的父类ant-menu-item，为其设置高亮样式，从而解决问题。