使用element-ui的el-menu导航选中后刷新页面保持当前选中
时间: 2023-08-14 10:05:22 浏览: 407
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
在element-ui的el-menu中,可以使用`router-link`来实现路由跳转,这样在切换路由时就可以保持当前选中的菜单项。具体实现步骤如下:
1. 在el-menu中使用`router-link`组件来实现路由跳转,如下所示:
```
<el-menu default-active="1" class="el-menu-vertical-demo" router>
<router-link to="/home">
<el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item>
</router-link>
<router-link to="/about">
<el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item>
</router-link>
<router-link to="/contact">
<el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item>
</router-link>
</el-menu>
```
2. 使用Vue Router的`router-link-active`指令来自动设置菜单项的选中状态,如下所示:
```
<el-menu default-active="1" class="el-menu-vertical-demo" router>
<router-link to="/home" router-link-active="active">
<el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item>
</router-link>
<router-link to="/about" router-link-active="active">
<el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item>
</router-link>
<router-link to="/contact" router-link-active="active">
<el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item>
</router-link>
</el-menu>
```
3. 在样式中定义`.active`类来设置选中状态的样式,如下所示:
```
.active {
background-color: #409EFF !important;
color: #fff !important;
}
```
这样就可以实现在el-menu中保持当前选中的菜单项,并在切换路由时自动更新选中状态。
阅读全文