element ui侧边栏高亮
时间: 2023-11-04 18:05:31 浏览: 143
Element-UI是一套基于Vue.js 2.0的桌面端组件库,其中包括了侧边栏组件。在使用Element-UI的侧边栏组件时,可能会遇到侧边栏高亮的问题。具体表现为按F5刷新页面后,导航栏默认折叠起来,并且无高亮显示;点击浏览器的前进后退按钮后,高亮显示与页面内容不同步。解决这个问题的方法有两种:
1. 按F5刷新高亮问题:可以在侧边栏组件中设置default-active属性,将其值设置为当前路由的path,这样在刷新页面后,侧边栏会自动高亮当前路由对应的菜单项。
2. 前进后退后高亮不同步问题:可以使用Element-UI提供的router模式,将el-menu组件的router属性设置为true,然后将router-link标签上的path属性赋值给el-menu-item组件的index属性,这样在前进后退时,侧边栏会自动高亮当前路由对应的菜单项。
下面是一个使用router模式解决侧边栏高亮问题的代码示例:
```
<el-menu class="el-menu-vertical-demo" :default-active="$route.path" router>
<el-menu-item index="/home/index">
<i class="el-icon-s-platform"></i>
<span slot="title">数据统计</span>
</el-menu-item>
<el-menu-item index="/CorporateManagement/Gongsiguanli">
<i class="el-icon-office-building"></i>
<span slot="title">公司管理</span>
</el-menu-item>
<el-menu-item index="/JieKouGL/InterfaceManagement">
<i class="el-icon-s-operation"></i>
<span slot="title">接口管理</span>
</el-menu-item>
</el-menu>
```
阅读全文