解决Element ui导航栏选中背景色刷新消失的问题
作者：猴子都会我不会
这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Element ui导航栏选中背景色刷新消失
<el-menu
:is-collapse="isCollapse"
text-color="#fff"
active-text-color="#fff"
:default-active="activerouter"
:router="true"
>
</el-menu>
//重点在于:default-active="activerouter"的设置1.activerouter 挂在data 中
data() {
return:activerouter;
}mounted() {
this.activerouter = window.location.pathname
//正常情况下加上这句话是可以解决的，如果解决不了，继续往下看
},2.给menuItem加点击事件，路由地址作为参数
<el-menu-item
:index="subItem.path"
class="active_bg"
:class="{ active_bg: index == activeIndex }"
@click="selectMenuItem(subItem.path)"
>
</el-menu-item>3.把拿到的路由地址保存在本地
selectMenuItem(path) {
this.activerouter = path
window.sessionStorage.setItem("activerouter", path);
},
4.敲黑板注意，这个时候mounted()里面写的就是如下了，就别再用location.pathname啦
mounted() {
//获取地址栏中的路由，设置elementui中的导航栏选中状态
this.activerouter = window.sessionStorage.getItem("activerouter");
console.log('activerouter',this.activerouter)
},Element ui导航栏选中高亮,刷新后选中消失
侧边菜单
导航栏选中后重新刷新页面会发现选中的导航栏高亮消失了，或者跳到了其它选项，这里的思路就是定义方法，把路由存入到sessionStorage，页面重新加载的时候从sessionStorage中获取
<!--侧边菜单-->
<el-menu :default-active="active" class="el-menu-vertical-demo" router>
<router-link to="/user" style="text-decoration: none">
<el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')">
<el-icon><User /></el-icon>
<span>User Information</span>
</el-menu-item>
</router-link>
<el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')">
<el-icon><Tickets /></el-icon>
<span>Order Management</span>
</el-menu-item>
<el-menu-item index="manage" v-if="userInfo.rolename=='op' ? false : true" @click="selectMenuItem('manage')">
<el-icon><Reading /></el-icon>
<span>Task Management</span>
</el-menu-item>
<el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')">
<el-icon><Calendar /></el-icon>
<span>Schedule</span>
</el-menu-item>
</el-menu> data() {
return {
active: "/user",
};
},mounted(){
this.active = window.sessionStorage.getItem("activerouter");
}, methods: {
selectMenuItem(path) {
this.active = path
window.sessionStorage.setItem("activerouter", path);
},
} 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。