vue+ElementUI中菜单高亮问题
时间: 2023-09-13 12:12:43 浏览: 55
在Vue+ElementUI中,可以通过给菜单添加 `index` 属性来控制菜单的高亮显示。具体做法如下:
1. 在菜单组件中添加 `index` 属性,例如:
```html
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
<el-menu-item index="/">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/about">
<i class="el-icon-document"></i>
<span slot="title">关于我们</span>
</el-menu-item>
<el-menu-item index="/contact">
<i class="el-icon-phone"></i>
<span slot="title">联系我们</span>
</el-menu-item>
</el-menu>
```
2. 在路由配置文件中,设置每个路由的 `path` 和 `name`,例如:
```javascript
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
```
3. 在路由组件中,设置当前路由对应的菜单项高亮显示,例如:
```javascript
export default {
name: 'About',
mounted() {
this.$nextTick(() => {
this.$refs.menu.$el.querySelector('.el-menu-item[data-path="/about"]').classList.add('is-active')
})
}
}
```
其中,`this.$refs.menu` 是菜单组件的引用,`.el-menu-item` 是菜单项的选择器,`data-path` 属性是菜单项对应的路由路径。在 `mounted` 钩子函数中,通过 `querySelector` 方法获取到当前路由对应的菜单项,并添加 `is-active` 类名来实现高亮显示。