解决vue页面刷新或者后退参数丢失的问题

解决vue页面刷新或者后退参数丢失的问题

在toB的项目中，会经常遇到列表数据筛选查询的情景，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，辛辛苦苦选择好的条件全没了，还得重新选择，如果有分页的更头大，还得重新一页页翻到之前看到的那一页，用户体验极度不友好。

我的解决有两种：

第一种方法：用vue 的&laPOmnKct;keep-alive>，即在外套一层。

虽然可以达到一定效果，但是控制起来比较麻烦，比如项目中并不是所有页面都需要缓存，代码写起来复杂

第二种方法：直接用localStorage，简单粗暴（推荐）

代码如下：

list.vue

export default {

data () {

return {

searchForm:{

project_name:'',

status:'',

city:'',

round:'',

fund:'',

charge:'',

page: 1

},

},

beforeRouteLeave(to, from, next){

//打开详情页（或者下一个任意界面）之前，把筛选条件保存到localStorage，如http://果离开列表页并且打开的不是详情页则清除，也可以选择不清除

if (to.name == 'Detail') {

let condition = jsON.stringify(this.searchForm)

localStorage.setItem('condition', condition)

}else{

localStorage.removeItem('condition')

}

next()

},

created(){

//从localStorage中读取条件并赋值给查询表单

let condition = localStorage.getItem('condition')

if (condition != null) {

this.searchForm = JSON.parse(condition)

}

this.$http.get('http://example.com/api/test', {params: this.searchForm})

.then((response)=>{

console.log(response.data)

}).catch((error)=>{

console.log(error)

})

}

}

}

这aPOmnKc种方法也受限于localStorage的局限性，不过可以通过使用cookie来弥补，具体不再详述。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。