Ant-design-vue: 请求menu组件跟路由/地址栏同步高亮选中的demo

[evolutionjay]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

menu组件 跟 route 同步选中高亮 item 我相信这个需求应该不在少数，希望开发大大能在 https://github.com/vueComponent/ant-design-vue/tree/master/components/menu/demo 这种地方， 给出一个 demo ， 直观展示出 item select 跟 当前路由 地址 同步的 demo， 万分感激。

What does the proposed API look like?

route sync menu current select item / items

[xunmi1]

menu-data 使用路由的 name 为 key 值, 监听 ‘$route.name’ ，发生改变时，修改 AMenu 的 selected-keys 和 open-keys，selected-keys(选中项) 保存着当前路由的 name (即$route.name)，需要注意 selected-keys 是数组类型；open-keys 保存展开菜单的路径数组，可以根据 $route.name，深度遍历 $router.options.routes , 找出当前路由的所有父级路由的 name, 依次保存到 open-keys 中。
自己动手，丰衣足食

[sendya]

高亮选中项 可以参考这个文件 https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/menu/index.js#L113

[sendya]

大致思路是

const routes = this.$route.matched.concat() // 获取当前被匹配中的路由数组
this.selectedKeys = [routes.pop().path] // 为双向绑定用的 selectedKeys 赋值

更加详情的文档请查阅官方文档

[evolutionjay]

如果 key 不是 常规路径，而是 带 query 的话， 上面说的就失效，大概下面的办法能解决

    updateMenu() {
      this.selectedKeys =  [  decodeURIComponent(this.$route.fullPath ) ];
      console.log( this.selectedKeys );
    }

[Mister-Hope]

可是我在用ts，1.37版本的时候遇到了bug，更改v-model的值虽然能使新的menu-item显示激活状态，但是点击触发的那个menu激活状态不会消失。

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.