Element UI导航菜单刷新就复原问题解决方法~

1、首先要知道为什么一刷新就复原了,是因为default-active属性设置的是默认值,是一个死值,一旦刷新就会复原,造成高亮不能保持,那么怎么解决呢?

2、很简单,无需像一些博主一样绑定path。思路:既然一刷新就复原了,那么我们在切换的时候就将值存储在本地存储或vuex中呗。

方法一:本地存储

<el-menu:default-active="activeIndex2" class="el-menu-demo" mode="horizontal"@select="handleSelect" background-color="#545c64" text-color="#fff"active-text-color="#ffd04b"
><el-menu-item :index="String(index)" v-for="(item,index) in list" :key="item.id">{{ item.name }}</el-menu-item><el-submenu index="4"><template slot="title">我的工作台</template><el-menu-item index="4-1">设置</el-menu-item><el-menu-item index="4-2" >退出</el-menu-item></el-submenu>
</el-menu><script>
export default {name: "showTop",data() {return {list: [{name:"首页",id:0},{name:"商品",id:1},{name:"订单",id:2},{name:"会员",id:3},{name:"设置",id:4},{name:"管理员",id:5}],activeIndex2: null};},mounted(){if(localStorage.getItem('activeIndex2')){this.activeIndex2 =localStorage.getItem('activeIndex2')}else{this.activeIndex2 =String(this.list[0].id)}},methods: {// 顶部导航栏点击事件handleSelect(key, keyPath) {console.log(key,keyPath);// 解决element ui组件库中顶部导航栏刷新复原问题,也可存储在vuex中localStorage.setItem('activeIndex2',String(this.list[key].id))// 判断是否是退出按钮if(key=='4-2'){// 清空本地缓存的tokenlocalStorage.removeItem('token')// 跳转至登录页this.$router.push({name:'login'})}}},
};
</script>

方法二:vuex+本地存储

<el-menu:default-active="activeIndex2" class="el-menu-demo" mode="horizontal"@select="handleSelect" background-color="#545c64" text-color="#fff"active-text-color="#ffd04b"
><el-menu-item :index="String(index)" v-for="(item,index) in list" :key="item.id">{{ item.name }}</el-menu-item><el-submenu index="4"><template slot="title">我的工作台</template><el-menu-item index="4-1">设置</el-menu-item><el-menu-item index="4-2" >退出</el-menu-item></el-submenu>
</el-menu><script>
import { mapMutations} from 'vuex';
export default {name: "showTop",data() {return {list: [{name:"首页",id:0},{name:"商品",id:1},{name:"订单",id:2},{name:"会员",id:3},{name:"设置",id:4},{name:"管理员",id:5}],activeIndex2: null};},mounted(){if(localStorage.getItem('activeIndex2')){this.activeIndex2 =localStorage.getItem('activeIndex2')}else{this.activeIndex2 =String(this.list[0].id)}},methods: {...mapMutations(['setActiveIndex2']),// 顶部导航栏点击事件handleSelect(key, keyPath) {console.log(key,keyPath);// 存储到vuex中,但是要记住还需要在vuex中存储到本地存储中this.setActiveIndex2(String(this.list[key].id))// 判断是否是退出按钮if(key=='4-2'){// 清空本地缓存的tokenlocalStorage.removeItem('token')// 跳转至登录页this.$router.push({name:'login'})}}},
};
</script>

 

//store中的index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)export default new Vuex.Store({state:{activeIndex:'',},mutations:{setActiveIndex2(state,e){state.activeIndex = ewindow.localStorage.setItem('activeIndex2',e)}},
})
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';
import store from '../store';
Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App),
}).$mount('#app')

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397414.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中信号的相关概念

信号 内核层和用户层通信的一种方式 信号类型 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP 6) SIGABRT 7) SIGBUS 8) SIGFPE 9) SIGKILL 10) SIGUSR1 11) SIGSEGV 12) SIGUSR2 13) SIGPIPE 14) SIGALRM 15) SIGTERM 16) SIGSTKFLT 17) SIGCHLD 18…

【限流与Sentinel超详细分析】

Sentinel 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式服务架构的流量控制组件&#xff0c;主要以流量为切入点&#xff0c;从流量控制、熔断降级、系统自适应保护等多个维度来保障微服务的稳定性。 1 Sentinel 基本概念 资源…

MySQL —— 聚合查询,分组查询 与 联合查询

聚合函数 常见的统计总数、计算平局值等操作&#xff0c;可以使用聚合函数来实现&#xff0c;常见的聚合函数有&#xff1a; 函数说明count()统计数据总数sum()求和avg()求平均值max()求最大值min()求最小值 注意凡是涉及运算的&#xff0c;数据库会自动掉 NULL 值 注意NULL …

本地安Stable Diffusion全记录

这里写自定义目录标题 资料 资料 AI绘图软件Stable Diffusion 之本地安装 手把手教你在本机安装Stable Diffusion秋叶整合包 让 stable diffusion 局域网访问&#xff1a;详细解析配置步骤【Stable Diffusion 实战教程】 局域网多设备访问stable diffusion Stable Diffusion 老…

Lua语言基础学习:安装Lua和Lua库管理工具

Lua语言简介 Lua是一种轻量、高效、可嵌入的脚本语言&#xff0c;由巴西里约热内卢天主教大学的研究小组于1993年开发&#xff0c;Lua的解释器非常小巧&#xff0c;编译后的体积很小&#xff08;如完整解释器不过200KB&#xff09;&#xff0c;这使得它非常适合嵌入到其他应用程…

谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存

文章目录 一&#xff0c;谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存1&#xff0c;在Elasticsearch的配置类中增加通用设置2&#xff0c;索引数据3&#xff0c;验证 一&#xff0c;谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存 1&#xff0c;在…

汇编语言基础及常见汇编指令

一、实验原理 x64dbg 是一款开源且免费的 Ring 3 级动态调试器&#xff0c;采用 QT 编写&#xff0c;支持 32 / 64 位程序。其反汇编引擎 BeaEngine 和 Capstone 功能极其强大&#xff0c;也有丰富的插件和脚本功能&#xff0c;且并保持更新&#xff0c;目前已经基本替代了 Ol…

数字医学影像系统PACS源码,三甲以下医院都能满足,C#语言开发,C/S架构系统成熟稳定,支持二次开发项目使用。

数字医学影像系统&#xff08;RIS/PACS&#xff09;源码&#xff0c;三甲以下的医院都能满足。开发技术&#xff1a;C/S架构&#xff0c;C#开发语言&#xff0c;数据库服务器采用Oracle数据库。 PACS系统模块组成 &#xff1a; 工作站&#xff1a; 分诊工作站、超声工作站、放…

学习鸿蒙-应用市场申请签名

1.需要的文件概念 .cer / .p7b / .p12 / .csr HarmonyOS应用/服务通过数字证书&#xff08;.cer文件&#xff09;和Profile文件&#xff08;.p7b文件&#xff09;来保证应用/服务的完整性。在申请数字证书和Profile文件前&#xff0c;首先需要通过DevEco Studio来生成密钥&am…

为具有公网IPV6地址的服务器安装nextcloudAIO并使用NginxProxyManager配置反向代理

软件和硬件环境 ubuntu server 24.04&#xff0c;并已配置好ipv6公网地址&#xff0c;已安装好docker和docker-compose。一块单独的硬盘&#xff0c;用于单独存储nextcloud数据。&#xff08;非必需&#xff09;有一个能够正常解析的域名&#xff0c;并已配置好AAAA记录解析。…

【Linux学习】动静态库从原理到制作

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 &#x1f351;动静态库&#x1f41f;动静态库的制作与使用&#x1f680;生成静态库&#x1f512;生成动态库 &#x1f98c;动态库的查…

Maven下载、配置以及IDEA配置Maven新建Maven项目(超详细版)

Maven下载配置&#xff1a; 一、下载apache-maven-3.5.2并解压 二、创建一个本地仓库 三、在解压文件中的conf文件夹中的settings.xml文件中配置本地仓库 四、环境变量配置 1.此电脑(右击)------->属性------->高级系统设置------->环境变量 2.新建MAVEN_HOME&…

IP实现https访问的教程

IP地址实现HTTPS地址访问&#xff0c;首先要获得浏览器可信的SSL证书&#xff0c;并且该SSL证书是操作系统默认根证书信任证书。那有的人问&#xff1a;“内网的IP地址可以吗&#xff1f;答案是肯定不可以的”内网的IP地址只能用自建发的SSL证书实现HTTPS&#xff0c;不会被浏览…

数据结构——栈(Stack)

目录 前言 一、栈的概念 1、栈的基本定义 2、栈的特性 二、栈的基本操作 1.相关操作概念 2.实现方式 &#xff08;1&#xff09;顺序栈 &#xff08;2&#xff09;链式栈 三、栈的应用 总结 前言 栈&#xff08;Stack&#xff09;是一种常见且重要的数据结构&#xff0c;它遵循…

“tcp控制协议”的理解

情景解释&#xff1a; 1.过程&#xff1a; 在用户进行网络间通信时&#xff0c;不管是客户端还是服务端&#xff0c;都会有两个缓冲区——发送缓冲区和接受缓冲区。 通过4个缓冲区进行数据交流。 用户通过write()将数据发送到他的发送缓冲区中&#xff0c;再传输到服务端的…

C# Winform 多窗体切换方式一

一、简介 在 Winform 开发中&#xff0c;多窗体的切换是一个常见的需求&#xff0c;比如登录成功后&#xff0c;切换至主界面&#xff0c;在网上查阅相关的资料&#xff0c;你会发现很多都是用 form2.Show(); this.Hide(); 这种方式&#xff0c;这种方式也存在一些问题&#…

【学习笔记】Day 9

一、进度概述 1、inversionnet_train 试运行——成功 二、详情 1、inversionnet_train 试运行 在经历了昨天的事故后&#xff0c;今天最终成功运行了 inversionnet_train&#xff0c;运行结果如下&#xff1a; 经观察&#xff0c;最开始 loss 值大概为 0.5 左右 随着训练量的增…

ECR绕过技巧

一、预编译与sql注入 预编译SQL有两个优势&#xff1a; 1、性能更高&#xff1a;预编译SQL&#xff0c;编译一次之后会将编译后的SQL语句缓存起来&#xff0c;后面再次执行这条语句时&#xff0c;不会再次编译。&#xff08;只是输入的参数不同&#xff09;。 2、更安全(防止S…

漏洞复现-Apache Struts2 文件上传漏洞(CVE-2023-50164)

1.漏洞描述 Apache Struts2 是一个开源的 Java Web 应用程序开发框架&#xff0c;旨在帮助开发人员构建灵活、可维护和可扩展的企业级Web应用程序。 由于文件上传逻辑存在缺陷&#xff0c;攻击者可以操纵文件上传参数来实现路径穿越&#xff0c;在某些情况下&#xff0c;通过…

HTTP的场景实践

HTTP的场景实践&#xff1a;任选一个浏览器&#xff0c;对于其涉及的请求中的缓存策略展开具体分析 1. 强缓存&#xff1a; Cache-Control用于指定缓存的最长有效时间。 Expires用于指定资源过期的日期。 2. 协商缓存&#xff1a; ETag用于标识资源的唯一标识符&#xff0c;…