tip:vue中路由跳转,返回是还想保留原来的搜索条件
新写的一个项目,使用后发现,点“详细”跳转到详情页面。返回时,原来的筛条件没了,又把全部的数据都查询出来,还需要重新筛选一下,使用起来很不友好。页面跳转前将这个对象存储到本地存储。因为只能存储字符串,所以可以将多个搜索条件组合成一个 JSON 对象存储。初始页面有一个筛选条件对象: QInstrumentQuery:{}
·
新写的一个项目,使用后发现,点“详细”跳转到详情页面。返回时,原来的筛条件没了,又把全部的数据都查询出来,还需要重新筛选一下,使用起来很不友好。
解决办法:浏览器本地存储(LocalStorage 或 SessionStorage)处理多个搜索条件
初始页面有一个筛选条件对象: QInstrumentQuery:{}
页面跳转前将这个对象存储到本地存储。因为只能存储字符串,所以可以将多个搜索条件组合成一个 JSON 对象存储。
data(){
QInstrumentQuery:{},//筛选条件
}
//详情按钮,跳转到设备详情页,
view(id){
//先存储搜索条件到浏览器的本地存储来,mounted钩子中拿出
localStorage.setItem('QInstrumentQuery', JSON.stringify(this.QInstrumentQuery));
this.$router.push("/dashboard/instruments/query/"+id);
},
当返回页面时,从本地存储中获取并解析这些条件:
mounted() {
//从浏览器本地缓存取出搜索条件
let storedContent = localStorage.getItem('QInstrumentQuery');
if (storedContent) {
this.QInstrumentQuery = JSON.parse(storedContent);
}else{
this.QInstrumentQuery.state=0;//默认状态选择“启用”
}
}
更多推荐
所有评论(0)