ElementUI NavMenu菜单项刷新页面后选中状态消失的问题

分类:计算机 | 前端 | ElementUI | NavMenu导航菜单 417
更新:2020-03-15 00:00:00
编辑

说明

最近在Nuxt.js项目中使用ElementUI的NavMenu菜单项时发现一个问题,就是某个菜单项的选中状态会在页面刷新后消失,比如之前我是第3个菜单被选中,但是页面刷新后变成了第1个菜单被选中,而我使用的选中方式是:default-active="activeIndex",刚开始找了一些方法没有解决这个问题。

解决方法

后来在网上找了一些资料,发现可以使用:default-active="$route.path"的方式来解决这个问题,具体的代码配置如下:

<el-menu :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    router="router"
    text-color="#fff"
    background-color="#282b33"
    active-text-color="#ffd04b">
    <el-menu-item index="/index">菜单一</el-menu-item>
    <el-menu-item index="/index" disabled>菜单二</el-menu-item>
    <el-menu-item index="/index">菜单三</el-menu-item>
</el-menu>

其中每个menu-item的index中配置的是点击后要跳转的路由路径,不过还有一个地方要特别注意,那就是要加上属性:router="router",没有这个属性的话路由跳转是不生效的。

参考资料

1、https://www.jianshu.com/p/85a1590d9309
2、https://blog.csdn.net/qlin_11/article/details/98940306