当前位置: 首页 > Web前端 > HTML5

Vue使用History记录上一页的数据

时间:2023-04-05 02:10:10 HTML5

UI需要从列表页第二页进入详情页,返回时列表页仍然显示在第二页;从列表页的第二页进入详情页,返回时列表页的过滤条件依然存在。技术选择使用vue-router组件,通过this.$router.push({path:path,query:query});方式,页码和选择条件作为参数保存在url中,这种方式在上面的UI设计中是可行的,但是当列表页包含tab组件时(分页组件是public的),会导致一些问题,因为推送因素(因为推送会打开一个新页面)(PS:也有可能是我技术能力的原因),没有实现。使用HistoryAPI(HTML5支持),通过history.replaceState方法将页码作为参数存储在url中,将选择条件存储在history中(不清楚数据存储在哪里);通过location.hash方法获取页码;通过history.state获取存储选择标准。具体实现--技术选择2switch为分页组件添加一个switch(openroute),因为需要灰度上线,万一出现问题,只有一个页面需要调整。代码如下:在分页组件中存储页码和选择标准&获取页码列表页获取选择条件。目前可能是框架设计的问题,无法在请求数据变量之前用Object.assign替换initial,所以先这样处理(笨方法,大家有办法,求指导我,谢谢你):<脚本t>exportdefault{data(){return{form:{aaa:(history.state&&history.state.aaa)?history.state.aaa:null,bbb:(history.state&&history.state.bbb)?history.state.bbb:null,ccc:(history.state&&history.state.ccc)?history.state.ccc:null},};}};已经解决了,初始变量不需要移动,可以通过以下方式实现:created(){//获取缓存数据if(history.state){Object.assign(this.form,history.state)if(this.form.key){deletethis.form.key}}},记录在这里:我以为创建的方法是在分页组件的watch监听之后执行的,结果是后来发现误导了(因为数据赋值之前是通过Object.assign(true,this.form,history.state)实现的),但是没有成功)这里有一个简短的总结:Object.assign(true,a,b);之间有什么区别?和“Object.assign(a,b);”?结论:前者:改变a不影响b;后者:改a影响b分析(这篇文章有源码分析(求解答:WebStorm中如何关联源码?),很棒:https://www.cnblogs.com/libin...FAQ需要使用history.replaceState方法,因为:它不会将改变的url推送到历史栈,所以不会增加回滚和前进的步数;使用history.replaceState方法,可以存储的状态大小不能操作为640k;可能存在浏览器兼容性问题,请查看这里:https://caniuse.com/#feat=his....Demo或Source是公司项目,所以目前没有Demo或源码参考文章Manipulatingthebrowserhistory