html详情页返回到列表,前端列表页进入详情页返回时保留上次列表页的数据

//本地存储

//根据路由守卫来判断是从哪个页面进入此页面的

beforeRouteEnter(to, from, next) {

if (from.path == "/recruitment/detail") {

sessionStorage.setItem("getInitInfoFlag", "true");

next();

} else {

sessionStorage.setItem("getInitInfoFlag", "false");

next();

}

},

created(){

const getInitInfoFlag = sessionStorage.getItem("getInitInfoFlag");

if (getInitInfoFlag === "true") {

const searchInfo = JSON.parse(sessionStorage.getItem("searchInfo"));

this.limit = searchInfo.limit;

this.page = searchInfo.page;

this.name= searchInfo.name;

this.age= searchInfo.age;

......

} else {

sessionStorage.removeItem("searchInfo");

}

this.init()

},

method:{

//初始化页面

init(){

......

},

//进入详情页面

goDetail(){

let searchInfo={

page:this.page,

limit:this.limit,

name:this.name,

age:this.age,

......

}

//保存起来

sessionStorage.setItem("searchInfo", JSON.stringify(searchInfo));

this.$router.push({

path:‘详情路由‘,

query:{

//传的参数

}

})

}

}

原文：https://www.cnblogs.com/itcjh/p/13427205.html