Antd Pro Vue2这套框架的路由菜单有两个问题，

1、页面迁移子页面，父页面对应的菜单未能选中高亮显示

2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示

网上查到的一些菜单配置都是新版本的，老版本并不支持这些方法，这里总结一下我的解决方法，如果大家有更好的解决方案，欢迎交流。

一、解决第一个问题

以我的菜单为例

商品列表是菜单页面，添加编辑商品是隐藏菜单，我把他们做成了兄弟菜单，而不是子菜单

/src/config/router.config.js配置如下

然后再/src/layouts/BasicLayout.vue页面做处理，这个页面是框架基础页面，菜单以及页面导航组件都集成在这里面

created方法里面，我做了一个路由监听，在路由route变化时触发

created () {

    this.$watch('$route', (val) => {
      var selector = this.$el.querySelectorAll('a')
      for (var i in selector) {
        if (selector[i].href) {
          if (selector[i].href && selector[i].href.includes(val.path)) {
          //判断是菜单标签，并且路径与当前页面路径相匹配，直接修改对应菜单背景色
            selector[i].parentElement.style.background = '#f47c4e'
          } else {
             //当前path不是菜单对应页面
            if (selector[i].href.includes('store/goods')) {
            //当前标签是商品列表
              if (val.path === '/store/goods/create' || val.path === '/store/goods/update' || val.path === '/store/goods/copy') {
              //当前path是新建、编辑、复制商品页面，即商品的子页面，让商品列表页面菜单选中
                selector[i].parentElement.style.background = '#f47c4e'
              } else {
              //当前path是不是商品的子页面，清除商品列表页面菜单选中
                selector[i].parentElement.style.background = 'none'
              }
            } else {
              //其他页面，清除选中样式
              selector[i].parentElement.style.background = 'none'
            }
          }
        }
      }
    })
  },

已上这个方法，经过多次修改，最终呈现出这个样子，

通过this.$el.querySelectorAll('a')获取所有a标签元素，遍历出菜单

selector[i].parentElement.style.background是给a标签的父元素设置样式，通过查看菜单元素确定

可以看到，如果菜单正常选中，菜单li标签会添加ant-menu-item-selected样式，来显示菜单高亮

原先我想着已经获取到标签了，直接给标签加上ant-menu-item-selected样式应该就好使，但事与愿违

页面path改变时，route监听方法触发的比实际样式改变的要早，触发之后，ant-menu-item-selected才会被清除掉，也就是说我加了也没用

最后使用了selector[i].parentElement.style.background方法来显示菜单高亮

注意：这个方法还有个问题，因为我用的是includes方法来匹配当前页面path和a标签href，所以如果有相似的菜单，比如/store/goods和/store/goods1，页面path是/store/goods时，两个菜单会同时匹配上，都会被设置选中样式，大家有这种情况的可以换其他方式匹配

二、解决第二个问题

根据第一个问题的解决方法，我想依样画葫芦，页面刷新时，把页面path对应菜单直接变成选中状态即可，但并没有这么简单

页面登录后跳转默认页面，或者页面刷新时，并不会触发route监听方法，但是可以获取到当前页面path

我想在/src/config/router.config.js页面created方法或者mounted方法中，遍历菜单元素，匹配当前path进行修改，最终发现created方法和mounted方法触发的时候，页面菜单还没有渲染完成，根本获取不到菜单元素，也就无法遍历了

最后是在没招了，做了个延迟，这样确实可行，正常获取到了菜单元素

mounted () {
    //延时处理菜单选中
    setTimeout(() => {
      var path = this.$route.path
      //根据a标签选中时的样式，获取对应元素
      var selector = this.$el.querySelectorAll('.router-link-active')
      for (var i in selector) {
      //匹配当前页面，设置菜单选中样式
        if (selector[i].href && selector[i].href.includes(path)) {
          selector[i].parentElement.style.background = '#f47c4e'
        }
      }
    }, 800)
  },

经多次测试，延时800比较合适，可以正常获取菜单元素，页面菜单选中速度可以接受。