解决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);
    },
   } 

总结

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

相关文章

  • vue3项目打包与上线详细图文教程

    vue3项目打包与上线详细图文教程

    这篇文章主要给大家介绍了关于vue3项目打包与上线的相关资料,在项目完成得差不多得时候,就可以开始打包部署了,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue中如何实现复制内容到剪切板详解

    vue中如何实现复制内容到剪切板详解

    有些业务需求需要点击按钮复制链接,下面这篇文章主要给大家介绍了关于vue中如何实现复制内容到剪切板的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue-cli3使用postcss-plugin-px2rem方式

    vue-cli3使用postcss-plugin-px2rem方式

    这篇文章主要介绍了vue-cli3使用postcss-plugin-px2rem方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue3中element-plus Upload上传文件代码示例

    vue3中element-plus Upload上传文件代码示例

    这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue 使用localstorage实现面包屑的操作

    vue 使用localstorage实现面包屑的操作

    这篇文章主要介绍了vue 使用localstorage实现面包屑的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue单文件组件的实现

    vue单文件组件的实现

    最近翻阅了一下vue。发觉有一个单文件组件之前基本忽视掉了。所以本文就详细的介绍了vue单文件组件的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    Vue3中使用Element Plus时el-icon无法显示的问题解决

    我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下
    2022-03-03
  • vue通过tailwindcss实现class动态绑定

    vue通过tailwindcss实现class动态绑定

    这篇文章主要介绍了vue通过tailwindcss实现class动态绑定,文中给大家介绍了一些常用类名语法记录,对vue动态绑定class相关知识感兴趣的朋友一起看看吧
    2023-07-07
  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    VSCode Vue开发推荐插件和VSCode快捷键(小结)

    这篇文章主要介绍了VSCode Vue开发推荐插件和VSCode快捷键(小结),文中通过图文表格介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 详解vue中localStorage的使用方法

    详解vue中localStorage的使用方法

    这篇文章主要介绍了详解vue中localStorage的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论