vue保留用户在列表的操作记录, beforeRouteLeave离开当前组件缓存数据即可

最近遇到一个需求,用户在列表页的查询输入框输入条件后,点击查询,然后此时切换菜单,再回到之前的页面,希望能停留在上一次输入的结果上,如下例子,用户管理页面,输入yangfan这个关键词搜索后,结果如下图:
在这里插入图片描述
当我此时点击权限管理后,再点击用户管理切回来,结果依旧如上,这主要是做了如下操作:在用户管理组件对应的路由导航里,用户在离开当前页之前把我们的操作写在了beforeRouteLeave这个钩子函数中,如果不是跳到登录页就将当前页的查询条件及页码等参数保存在缓存sessionStorage里,然后在下次进来这个页面时,在created里先获取缓存的数据然后判断赋值即可:

  created() {let getSession = sessionStorage.getItem(

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

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

相关文章

【Webpack】处理字体图标和音视频资源

处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库open in new window选择想要的图标添加到购物车,统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体…

用 Python 自动化处理无聊的事情

“编程最棒的部分就是看到机器做一些有用的事情而获得的胜利。用 Python 将无聊的事情自动化将所有编程视为这些小小的胜利;它让无聊变得有趣。” Hilary Mason,数据科学家兼 Fast Forward Labs 创始人 “我很享受打破东西然后把它们重新组合起来的乐趣…

Studio One 6免费下载安装激活教程

一、Studio One 6安装 1.双击Studio One6安装包(见文章尾部),如下图,可以切换语言,点击【OK】。 2.根据安装导航,点击【下一步】 3.阅读许可证协议后,点击【我接受】。 4.选择安装位置&#xf…

【C++】STL容器之string(一)

💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …

SQL注入漏洞解析--less-2

首先我们进入第二关 思路: 1.先判断是什么类型的注入 2.根据类型我们在找注入点 步骤: 1.提示我们输入id数字,那我们先输入1猜一下 2.这里正常回显,当我们后边加上时可以看到报错,且报错信息看不到数字&#xff0…

五、使用脚手架

五、使用脚手架 5.1 简单的实现 创建一个 School 组件 <template> <div><h2>学校名称&#xff1a;{{name}}</h2><h2>学校地址&#xff1a;{{address}}</h2> </div> </template><script> export default {name: "S…

想高薪就业鸿蒙HarmonyOS 开发岗位,到底该学习些啥?

鸿蒙是什么&#xff1f; 经过十多年的发展&#xff0c;传统移动互联网的增长红利已渐见顶。万物互联时代正在开启&#xff0c;应用的设备底座将从几十亿手机扩展到数百亿 IoT 设备。GSMA 预测到 2025 年&#xff0c;全球物联网终端连接数量将达 246 亿个&#xff0c;其中消费物…

CSP-J 2023 T3 一元二次方程

文章目录 题目题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题目传送门题解思路总代码 提交结果尾声 题目 题目背景 众所周知&#xff0c;对一元二次方程 a x 2 b x c 0 , ( a ≠ 0 ) ax ^ 2 bx c 0, (a \neq 0) ax2bxc0,(a0)&#xff0c;可…

React 事件处理 ( this问题 参数传递 ref)

React事件的命名采用小驼峰方式&#xff08;cameCase&#xff09;,而不是小写 使用JSX语法时你需要传入一个函数作为事件处理函数&#xff0c;而不是一个字符串 你不能通过返回false 的方式阻止默认行为。你必须显示式的使用preventDefault 1 this 需要谨慎对待JSX回调函数中的…

HubSpot数据驱动的网站优化策略

当涉及到HubSpot数据驱动的网站优化策略时&#xff0c;下面是一些具体且详细的描述&#xff1a; 1. 数据收集与分析&#xff1a; HubSpot提供了一系列数据收集和分析工具&#xff0c;让客户能够深入了解外贸网站的表现。这些工具包括网站分析、访客追踪、转化追踪等。客户可以…

【刷题】牛客 JZ64 求1+2+3+...+n

刷题 题目描述思路一 &#xff08;暴力递归版&#xff09;思路二 &#xff08;妙用内存版&#xff09;思路三 &#xff08;快速乘法版&#xff09;思路四 &#xff08;构造巧解版&#xff09;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01…

【SiamFC】《Fully-Convolutional Siamese Networks for Object Tracking》

ECCV 2016 Workshops 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 The OTB-13 benchmark5.3 The VOT benchmarks5.4 Dataset size 6 Conclusion&#xff08;own&#xff09;/ Future wo…