ant design vue 根据key值实现动态导航栏高亮

Ant Design Vue是基于Ant Design和Vue的UI组件库，它提供了丰富的组件来帮助开发者快速构建高质量的用户界面。在实现基于key值的动态导航栏高亮时，你可以利用Vue的响应式系统来动态更新当前激活的导航项。

实现步骤大致如下：

1. 维护一个响应式的数据状态，通常是一个变量，用来记录当前激活导航项的key值。
2. 在导航栏组件中，使用这个响应式的变量来决定哪一个导航项应该被高亮显示。
3. 当用户点击不同的导航链接时，更新这个响应式变量的值，从而触发导航栏的重新渲染，并且更新高亮状态。

下面是一个简单的示例代码：

<template>
  <a-menu
    :selected-keys="activeKey"
    mode="horizontal"
    @click="handleMenuClick"
  >
    <a-menu-item key="1">菜单一</a-menu-item>
    <a-menu-item key="2">菜单二</a-menu-item>
    <a-menu-item key="3">菜单三</a-menu-item>
  </a-menu>
</template>

<script>
export default {
  data() {
    return {
      activeKey: '1', // 默认激活的导航项key值
    };
  },
  methods: {
    handleMenuClick(e) {
      this.activeKey = e.key; // 当点击导航项时，更新激活的key值
    },
  },
};
</script>

在上述代码中，`:selected-keys` 绑定了响应式变量 `activeKey`，它决定了哪个菜单项应该被高亮显示。`@click` 是一个事件监听器，当用户点击某个菜单项时，触发 `handleMenuClick` 方法，并更新 `activeKey` 的值，从而改变高亮显示的导航项。