el-menu刷新保持选中状态
时间: 2023-05-08 13:56:39 浏览: 92
在vue.js框架中,使用element-ui组件库的el-menu菜单时,如果需要保持菜单选项在页面刷新后的选中状态,可以使用localStorage或sessionStorage存储用户选择的菜单选项,然后在组件的mounted钩子函数中读取存储的菜单选项状态并设置为当前选中项。具体实现步骤如下:
1. 在菜单组件中设置menu-item的index属性为选项的唯一标识,例如:
<template>
<el-menu class="menu" :default-active="activeIndex" @select="handleSelect">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i>导航一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</template>
2. 在菜单组件中定义选项选中的处理函数handleSelect,将选中的index存储到localStorage(或sessionStorage)中:
methods:{
handleSelect(index,indexPath) {
localStorage.setItem('activeIndex',index);
this.activeIndex = index;
console.log('activeIndex:',localStorage.getItem('activeIndex'));
}
}
3. 在组件的mounted钩子函数中读取localStorage中存储的选项状态,并设置为当前选中项:
mounted() {
var index = localStorage.getItem('activeIndex');
if(index){
this.activeIndex = index;
}
}
4. 最后,在每次页面刷新时,选中的菜单选项就可以被恢复,保持了选中状态。