解决Element ui导航栏选中背景色刷新消失的问题
更新时间:2023年05月22日 15:19:39 作者:猴子都会我不会
这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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); ? ? }, ? ?}?
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
解决Vue+Electron下Vuex的Dispatch没有效果问题
这篇文章主要介绍了Vue+Electron下Vuex的Dispatch没有效果的解决方案 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05element-UI el-table修改input值视图不更新问题
这篇文章主要介绍了element-UI el-table修改input值视图不更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论