antdesign pro vue pro-layout如何动态设置菜单高亮

在 Ant Design Pro Vue 中，可以使用 ProLayout 组件来实现动态设置菜单高亮的效果。具体的实现步骤如下：

1. 在路由配置中，为需要高亮的菜单项添加一个`meta`字段，例如：

{
  path: '/dashboard',
  name: 'dashboard',
  component: () => import('@/views/dashboard/index.vue'),
  meta: { menuKey: 'dashboard' }
}

2. 在 ProLayout 组件中，使用`route`属性绑定路由信息，并在`menuHeaderRender`和`menuItemRender`中根据`meta`字段的值来动态设置菜单高亮的效果，例如：

<template>
  <pro-layout :route="route" :menu="menu">
    <!-- 其他内容 -->
  </pro-layout>
</template>

<script>
export default {
  data() {
    return {
      route: [],
      menu: {
        // 菜单配置
      }
    }
  },
  watch: {
    $route() {
      this.setMenuActiveKey()
    }
  },
  created() {
    this.route = this.$router.options.routes
    this.setMenuActiveKey()
  },
  methods: {
    setMenuActiveKey() {
      const menuKey = this.$route.meta.menuKey
      this.menu.defaultSelectedKeys = menuKey ? [menuKey] : []
      this.menu.defaultOpenKeys = this.getDefaultOpenKeys(this.menu, menuKey)
    },
    getDefaultOpenKeys(menu, key) {
      let defaultOpenKeys = []
      for (const item of menu.children || []) {
        if (item.children) {
          defaultOpenKeys = defaultOpenKeys.concat(this.getDefaultOpenKeys(item, key))
        } else if (item.key === key) {
          defaultOpenKeys.push(menu.key)
        }
      }
      return defaultOpenKeys
    },
    menuHeaderRender({ menuHeaderRender }) {
      return menuHeaderRender && menuHeaderRender(this.menu)
    },
    menuItemRender({ path, name, icon, children, meta }) {
      const { defaultSelectedKeys } = this.menu
      const isActive = defaultSelectedKeys.includes(meta.menuKey)
      return `<span class="menu-item ${isActive ? 'active' : ''}">
        <router-link :to="{ path: '${path}' }">
          ${icon ? `<icon type="${icon}" />` : ''}
          <span>${name}</span>
        </router-link>
        ${children ? `<span class="arrow"></span>` : ''}
      </span>`
    }
  }
}
</script>

<style>
.menu-item.active {
  background-color: #1890ff;
  color: #fff;
}
</style>

这样，当路由跳转到`/dashboard`时，对应的菜单项就会高亮显示。注意，在`menuItemRender`中，你需要根据需要自定义菜单项的渲染方式，以适应你的业务需求。