vue项目列表跳转详情返回列表页保留搜索条件

需求 列表进入详情后,返回详情的时候保留搜索的条件,第几页进入的返回还在第几页

1.在详情页设置定义一个字段

mounted() {
    sessionStorage.setItem("msgInfo", true);
  },

2.在获取列表数据的时候在mounted里面判断定义的字段

if (sessionStorage.getItem("msgInfo")) {
      //如果有就读取缓存里面的数据
      this.pageNum = Number(sessionStorage.getItem("currentPage"));
      //搜索的数据
      let data = JSON.parse(sessionStorage.getItem("search"));
      this.search = data;
    } else {
      this.pageNum = 1;
      //其他页面第一次进入列表页,清掉缓存里面的数据
      sessionStorage.removeItem("search");
      sessionStorage.removeItem("currentPage");
    }

进入详情的时候保存一下页码和搜索的信息

details(data) {
      sessionStorage.setItem("currentPage", this.pageNum);
      sessionStorage.setItem("search", JSON.stringify(this.search));
      this.$store.commit("set_studentDetails", data);
      this.$router.push("/student_details");
    },

离开页面的时候清除定义的字段

destroyed() {
    // 销毁组件
    sessionStorage.removeItem("msgInfo");
  },

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-11 15:58:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-11 15:58:01       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-11 15:58:01       82 阅读
  4. Python语言-面向对象

    2023-12-11 15:58:01       91 阅读

热门阅读

  1. 了解linux计划任务

    2023-12-11 15:58:01       58 阅读
  2. c++基础 循环遍历 新手学习

    2023-12-11 15:58:01       54 阅读
  3. 一篇文章读懂Jenkins的发展历程

    2023-12-11 15:58:01       61 阅读
  4. 使用Boost.Outcome模块进行容器相关的测试程序编程

    2023-12-11 15:58:01       46 阅读
  5. React基础知识入门

    2023-12-11 15:58:01       66 阅读
  6. PTA:哈夫曼编码

    2023-12-11 15:58:01       65 阅读
  7. mysql8.x创建insert/update/delete触发器

    2023-12-11 15:58:01       59 阅读
  8. 算法通关村第十七关 | 黄金挑战 | 跳跃游戏

    2023-12-11 15:58:01       68 阅读