antd vue 刷新保留當前頁面路由，保留選中菜單，保留menu選中

刷新保留menu選中

<template>
    <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]">
        <a-menu-item :key="'/test'">
            <router-link to="home">
                <a-icon type="user"/>
                <span>nav 1</span>
            </router-link>
        </a-menu-item>
        <a-menu-item :key="'/about'">
            <router-link to="about">
                <a-icon type="video-camera"/>
                <span>nav 2</span>
            </router-link>
        </a-menu-item>
        <a-menu-item :key="'/123123'">
            <router-link to="123123">
                <a-icon type="upload"/>
                <span>nav 3</span>
            </router-link>
        </a-menu-item>
    </a-menu>
</template>

重點：
1，selectedkeys要設置成$route.path地址
2，a-menu-item 的key設置成要去的地址

效果

刷新保留sub-menu狀態，自動展開

https://www.antdv.com/components/menu-cn/#components-menu-demo-open-current-submenu-only

<template>
    <!--
        openKeys 當前展開的 SubMenu 菜單項 key 數組
    -->
    <a-menu theme="dark" mode="inline" :openKeys="openKeys" :selectedKeys="[$route.path]">
        <a-sub-menu key="sub-menu">
            <span slot="title">
                <a-icon type="setting" theme="filled" />
                <span>系統管理</span>
            </span>

            <a-menu-item
                :key="'/test'"
            >
                <router-link to="home">
                    <a-icon type="user"/>
                    <span>nav 1</span>
                </router-link>
            </a-menu-item>
            <a-menu-item :key="'/about'">
                <router-link to="about">
                    <a-icon type="video-camera"/>
                    <span>nav 2</span>
                </router-link>
            </a-menu-item>
            <a-menu-item :key="'/123123'">
                <router-link to="123123">
                    <a-icon type="upload"/>
                    <span>nav 3</span>
                </router-link>
            </a-menu-item>
        </a-sub-menu>
    </a-menu>
</template>

<script>
    export default {
        name: "Test",
        data(){
            return {
                openKeys: ['sub-menu'],
            }
        },
    }
</script>

重點：

openKeys 數組里設置的key要跟sub-menu的key保持一致

效果

參考：

https://blog.csdn.net/qq_32674347/article/details/92835764