下面我就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题，具有很好的参考价值，希望对大家有所帮助。
在tob的项目中，会经常遇到列表数据筛选查询的情景，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，辛辛苦苦选择好的条件全没了，还得重新选择，如果有分页的更头大，还得重新一页页翻到之前看到的那一页，用户体验极度不友好。
我的解决有两种：
第一种方法：用vue 的7c9485ff8c3cba5ae9343ed63c2dc3f7，即在975b587bf85a482ea10b0a28848e78a4外套一层7c9485ff8c3cba5ae9343ed63c2dc3f7。
虽然可以达到一定效果，但是控制起来比较麻烦，比如项目中并不是所有页面都需要缓存，代码写起来复杂
第二种方法：直接用localstorage，简单粗暴（推荐）
代码如下：
list.vue
export default { data () { return { searchform:{ project_name:'', status:'', city:'', round:'', fund:'', charge:'', page: 1 }, }, beforerouteleave(to, from, next){ //打开详情页（或者下一个任意界面）之前，把筛选条件保存到localstorage，如果离开列表页并且打开的不是详情页则清除，也可以选择不清除 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) }) } } }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue页面加载闪烁问题的解决方法
浅谈js获取modelandview值的问题
vue渲染时闪烁{{}}的问题及解决方法
以上就是解决vue页面刷新或者后退参数丢失的问题的详细内容。