侧边栏壁纸
  • 累计撰写 2,058 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录

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

大猿本猿
2023-01-31 / 1,215 阅读 / 225 字
" "

需求描述

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

解决方法

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");
    }

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

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

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

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