Ant Design Vue 导航菜单 路由与选中菜单对应

导航菜单

点击导航菜单跳转界面

刷新之后导航中选中的导航菜单栏会发生变化

如何实现界面刷新后对应选择得导航栏根据路由变化。

1.:open-keys="openKeys" 菜单呈打开状态

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

:key="'/ '" 绑定页面路由选中对应导航栏。

3.<router-link to="">文字</router-link> 点击跳转

<a-menu mode="inline" 
  :open-keys="openKeys" 
  :selectedKeys="[$route.path]" 
  style="width: 273px;height:1133px;">

     <a-sub-menu key="sub1">

        <span slot="title"><span>组件</span></span>

        <a-menu-item :key="'/Letter'">
            <router-link to="Letter">文字</router-link>
        </a-menu-item>

        <a-menu-item :key="'/MoButton'">
            <router-link to="MoButton">按钮</router-link>
        </a-menu-item>

        <a-menu-item :key="'/Icon'">
            <router-link to="Icon">图标</router-link>
        </a-menu-item>

        <a-menu-item :key="'/Breadcrumb'">
            <router-link to="Breadcrumb">面包屑</router-link>
        </a-menu-item>

        <a-menu-item :key="'/Dropdown'">
            <router-link to="Dropdown">下拉菜单</router-link>
        </a-menu-item>

        <a-menu-item :key="'/Pagination'">
            <router-link to="Pagination">分页</router-link>
        </a-menu-item>

        <a-menu-item :key="'/Steps'">
            <router-link to="Steps">步骤条</router-link>
        </a-menu-item>

     </a-sub-menu>

 </a-menu>