Element ui导航栏选中背景色刷新消失
|
1 2 3 4 5 6 7 8 9 |
<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 中
|
1 2 3 |
data() { return:activerouter; } |
|
1 2 3 4 |
mounted() { this.activerouter = window.location.pathname //正常情况下加上这句话是可以解决的，如果解决不了，继续往下看 }, |
2.给menuItem加点击事件，路由地址作为参数
|
1 2 3 4 5 6 7 |
<el-menu-item :index="subItem.path" class="active_bg" :class="{ active_bg: index == activeIndex }" @click="selectMenuItem(subItem.path)" > </el-menu-item> |
3.把拿到的路由地址保存在本地
|
1 2 3 4 |
selectMenuItem(path) { this.activerouter = path window.sessionStorage.setItem("activerouter", path); }, |
4.敲黑板注意，这个时候mounted()里面写的就是如下了，就别再用location.pathname啦
|
1 2 3 4 5 |
mounted() { //获取地址栏中的路由，设置elementui中的导航栏选中状态 this.activerouter = window.sessionStorage.getItem("activerouter"); console.log('activerouter',this.activerouter) }, |
Element ui导航栏选中高亮,刷新后选中消失
侧边菜单
导航栏选中后重新刷新页面会发现选中的导航栏高亮消失了，或者跳到了其它选项，这里的思路就是定义方法，把路由存入到sessionStorage，页面重新加载的时候从sessionStorage中获取
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!--侧边菜单--> <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> |
|
1 2 3 4 5 |
data() { return { active: "/user", }; }, |
|
1 2 3 |
mounted(){ this.active = window.sessionStorage.getItem("activerouter"); }, |
|
1 2 3 4 5 6 |
methods: { selectMenuItem(path) { this.active = path window.sessionStorage.setItem("activerouter", path); }, } |
