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

这篇具有很好参考价值的文章主要介绍了vue保留用户在列表的操作记录, beforeRouteLeave离开当前组件缓存数据即可。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  created() {
   
    let getSession = sessionStorage.getItem(

到了这里,关于vue保留用户在列表的操作记录, beforeRouteLeave离开当前组件缓存数据即可的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现用户操作日志记录

    java自带的日志框架是java.util.logging(JUL),从JDK1.4(2002)开始捆绑在JDK中。可以使用JUL来记录操作日志。以下是使用JUL记录事务的示例: 系统日志 :统日志主要是为开发排查问题提供依据,一般打印在日志文件中;系统日志的可读性要求没那么高,日志中会包含代码的信息

    2024年02月15日
    浏览(40)
  • 使用SpringBoot记录用户操作日志

    在工作中我们可能会遇到一个需求,就是记录用户的操作信息,接下来使用spring的aop特性实现这一需求 一、首先引入我们必要的一些依赖 二、自定义一个注解,用于标注需要监控的方法 三、在数据库中创建一张表,用来保存用户的操作日志 字段可以有  用户名  用户操作

    2024年02月06日
    浏览(40)
  • Spring Boot + Aop 记录用户操作日志

    本文主要介绍通过Aop记录用户操作日志,这也是目前比较常用的用法,由于水平有限,所以可能存在错漏之处,望指正。 对应实体类为 SysOperLog.java MyLog.java BusinessType.java — 操作类型枚举类 LogAspect.java 用户操作日志是AOP最常见的一种业务场景,这里只是简单记录了少量信息,

    2024年02月06日
    浏览(49)
  • selenium保留网页登陆信息(保留用户数据)

    打开谷歌浏览器访问 chrome://version/  找到这个路径,把结尾的default去掉  输入以上代码再打开浏览器就是登录的状态了 注意: 运行前要把谷歌浏览器的进程清理完,把所有的网页都关掉 如果还不行就cmd输入tasklist | findstr chrome查看一下,如果还有进程就kill一下所有的chrome

    2024年02月11日
    浏览(40)
  • vue3 监听resize窗口事件,离开页面要销毁窗口事件。

    resize事件: resize事件是改变窗口大小时发生的事件,可以在窗口开启、最大化、最小化、窗口大小改变(如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小)时发生。 1.监听浏览器窗口变化,实时获取该窗口的宽度和高度 2.监听 resize 事件 //优

    2024年02月12日
    浏览(47)
  • Java使用Aop实现用户操作日志记录(新手入门)

    导入打印日志,aop,hutool,的依赖,Hutool是一个Java工具包,里面封装了大量的常用工具类,到时候咱们就通过这个工具包中有一个工具类可以用来获取客户端IP地址。 自定义操作类型枚举类 因为基本是增删改查四个方法 自定义用来记录用户操作日志的注解 写一个方法加上我

    2024年02月06日
    浏览(48)
  • 通过Annotation将用户操作记录到数据库表功能实现

    一、背景         在用户对我们所开发的系统访问的时候,需要我们的系统具有强大的健壮性,使得给与用户的体验感十足。在业务开发的过程中,我们通过将几个相关的操作绑定成一个事件,使得安全性以及数据的前后一致性得到提高。但是在溯源方面,我们往往没有很好

    2024年03月13日
    浏览(89)
  • Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一

    1.1 头部是一个面包屑 (Breadcrumb)导航区域 1.2 白色区域是一个卡片(Card)视图 1.3 卡片 (Card)视图中嵌套了   输入框(Input )、 按钮(Button)、 表单(Form)、分页(Pagination ) Breadcrumb 面包屑 | Element Plus (gitee.io) https://element-plus.gitee.io/zh-CN/component/breadcrumb.html  2.1.1 复制

    2023年04月09日
    浏览(58)
  • SQL语句删除重复记录且只保留一条有效记录

    1. 查找表中多余的重复记录,重复记录是根据单个字段(name)来判断 2. 删除表中多余的重复记录,重复记录是根据单个字段(id)来判断,只留有id最小的记录 3. 删除表中多余的重复记录(多个字段),只留有id最小的记录 参考:https://blog.csdn.net/JineD/article/details/126875291

    2024年02月13日
    浏览(58)
  • gitee仓库迁移至gitlab仓库简单方法,保留提交记录

    1、先将gitee上的项目git clone至本地; 2、在gitlab上创建空项目,创建完成后复制新建项目的url; 3、cd至项目内部,查看git remote是否是origin; 4、是origin则直接修改origin的url,url为刚才复制的新建项目的url; 5、查看是否已修改为新项目地址的url; 6、推送代码至新仓库; 结束

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包