解决Element ui导航栏选中背景色刷新消失的问题

 更新时间:2023年05月22日 15:19:39   作者:猴子都会我不会  
这篇文章主要介绍了解决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);
    },
   } 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue生命周期实例小结

    vue生命周期实例小结

    这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 深入理解Vue.js3中Reactive的实现

    深入理解Vue.js3中Reactive的实现

    reactive是Vue 3的Composition API中的一个函数,它允许你创建一个响应式的数据对象,本文主要介绍了深入理解Vue.js3中Reactive的实现,感兴趣的可以了解一下
    2024-01-01
  • Vue 3中常用的生命周期钩子和监听器的操作方法

    Vue 3中常用的生命周期钩子和监听器的操作方法

    这篇文章主要介绍了Vue 3中常用的生命周期钩子和监听器的操作方法,分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新,需要的朋友可以参考下
    2024-07-07
  • uniapp使用webview内嵌H5的注意事项详解

    uniapp使用webview内嵌H5的注意事项详解

    在移动应用开发中,uniApp框架提供了一种跨平台的解决方案,允许开发者使用一套代码来构建iOS、Android等多平台的应用,这篇文章主要给大家介绍了关于uniapp使用webview内嵌H5的注意事项,需要的朋友可以参考下
    2024-07-07
  • 详解Vue中watch的高级用法

    详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下。
    2018-05-05
  • 如何使用Vue3构建一个图像画廊(支持图片上传)

    如何使用Vue3构建一个图像画廊(支持图片上传)

    这篇文章主要给大家介绍了关于如何使用Vue3构建一个图像画廊(支持图片上传)的相关资料,Vue画廊这是vue编写的图库应用程序,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vscode中Vue别名路径提示的实现

    vscode中Vue别名路径提示的实现

    这篇文章主要介绍了vscode中Vue别名路径提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • el-table 选择框根据条件设置某项不可选中的操作代码

    el-table 选择框根据条件设置某项不可选中的操作代码

    这篇文章主要介绍了el-table 选择框根据条件设置某项不可选中的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • 在vue项目中封装echarts的步骤

    在vue项目中封装echarts的步骤

    这篇文章主要介绍了在vue项目中封装echarts的步骤,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12

最新评论