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

Vue导航菜单刷新选中状态实现

最新推荐文章于 2023-07-25 16:27:51 发布

原创最新推荐文章于 2023-07-25 16:27:51 发布 · 7.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue

ant design 专栏收录该内容

2 篇文章

订阅专栏

博客围绕Vue导航菜单展开，指出点击导航菜单可跳转界面，但刷新后选中的导航栏会变化。介绍了实现界面刷新后导航栏根据路由变化的方法，如设置菜单打开状态、绑定页面路由选中对应导航栏，以及使用router - link实现点击跳转。

导航菜单

点击导航菜单跳转界面

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

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

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>