使用antd+vue实现动态菜单栏，刷新过后仍然选中，含有二级分

1、在刷新后，保持菜单选中

这个比较简单
antd的API中提供了一个defaultSelectedKeys参数
在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可完成

 :defaultSelectedKeys="[$route.path]"
 :selectedKeys="[$route.path]"

2、在刷新后如果当前选中的菜单是二级菜单则展开当前菜单的父菜单

这时需要用到两个API
openKeys 当前展开的 SubMenu 菜单项 key 数组
openChange 展开/关闭的回调

<div>
        <a-menu
                mode="inline"
                style="height: 100%"
                :defaultSelectedKeys="[$route.path]"
                :selectedKeys="[$route.path]"
                v-for="Menu in Menus"
                :key="Menu.index"
                :openKeys="openKeys"
                @openChange="onOpenChange"
        >

            <!--只有一级菜单-->
            <a-menu-item
                    v-if="!Menu.children"
                    :key="Menu.key"
            >
                <router-link :to="{ path: Menu.key }">
                    <a-icon :type="Menu.icon"/>
                    <span>{{Menu.title}}</span>
                </router-link>
            </a-menu-item>

            <!--多级菜单-->
            <a-sub-menu
                    v-else
                    :key="Menu.key"
            >
                <span slot="title">
                    <a-icon :type="Menu.icon"/>
                    {{Menu.title}}
                </span>
                <Menu :Menus="Menu.children"/>
            </a-sub-menu>

        </a-menu>
    </div>

 export default {
        name: "Menu",
        props: ['Menus'],
        data() {
            return {
                openKeys: [''],
            }
        },
        methods: {
            xhmenu() {
                const {Menus} = this
                for (let i = 0; i < Menus.length; i++) {
                    if (Menus[i].children) {
                        for (let y = 0; y < Menus[i].children.length; y++) {
                            if (Menus[i].children[y].key === this.$route.path) {
                                this.openKeys = [Menus[i].key]
                            }
                        }
                    }
                }

            },
 onOpenChange(openKeys) {  // 当菜单被展开时触发此处
                /* 
                经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组
                点击未展开的菜单时传入的是[当前展开菜单的key,点击的菜单key]
                下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0
                */
                if (openKeys.length !== 0) {
                    this.openKeys = [openKeys[1]]
                } else {
                    this.openKeys = ['']
                }
            },
        },
        mounted() {
            this.xhmenu()
        }
    }