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)
  },

好了，以上就是原因分析。下面是我们案例的完整代码：

<!--侧边菜单-->
         <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);
    },
   }

好了，以上内容就是今天要为大家分享的Element ui导航栏菜单选中背景色刷新后消失的原因及解决办法的全部内容，如果大家后期的工作也遇到类似的问题可以参考。