Vue利用History记录上一页面的数据方法实例
前言
铜山网站建设公司创新互联,铜山网站设计制作,有大型网站制作公司丰富经验。已为铜山上千余家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的铜山做网站的公司定做!
本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有‘#'的问题,下面话不多说了,来一起看看详细的介绍吧
UI
需求
从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。
技术选择
- 使用vue-router组件,通过
this.$router.push({path: path, query: query});
方式,将页码和选择条件作为参数存储在url中,这种方式在上面的UI设计中是可行的,但是当列表页中包含tab组件时(分页组件是公用的),会因为push的因素(因为push会打开新页面)导致一些问题(PS:也可能是本人技术能力的原因),未实现。 - 使用History API(HTML5开始支持),通过history.replaceState方式,将页码作为参数存储在url中,将选择条件存储在history中(尚不清楚数据具体是存储在哪里);通过
location.hash
方式获取页码;通过history.state
方式获取存储的选择条件。
具体实现--技术选择2
开关
为分页组件添加一个开关(openroute),因为需要灰度上线,万一有问题,要调整的页面也只有一个。代码如下:
分页组件中存储页码和选择条件&获取页码
列表页面获取选择条件
目前可能是因为框架设计的问题,没法在请求数据之前通过Object.assign
方式为替换初始变量,所以先这样处理(笨方法,各位大佬有解决办法麻烦指导下,谢谢):
已解决,初始变量不需要动,可以通过以下方式实现:
created(){ //获取缓存的数据 if (history.state) { Object.assign(this.form, history.state) if (this.form.key) { delete this.form.key } } },
这里记录下:之前以为created方法是在分页组件的watch监听之后执行的,后来发现被误导了(因为之前是通过Object.assign(true, this.form, history.state)
方式实现数据赋值的,但是并没有成功)。下面做个小总结:
Object.assign(true, a, b);”和“Object.assign(a, b);”有什么区别?
结论:前者:改a不影响b;后者:改a影响b
分析(这篇文章有源码分析( 求解答:WebStorm中如何关联源码?),很棒):
www.jb51.net/article/150037.htm...
FAQ
- 需要使用
history.replaceState
方式是因为:它不会将更改后的url压到history栈中,所以不会增加回退和前进的操作步数; - 使用
history.replaceState
方式,可存储的state大小不能操作640k; - 可能存在浏览器兼容性问题,请从此处查阅:https://caniuse.com/#feat=his...。
Demo Or Source
因为是公司项目,所以目前没有Demo或源码
参考文章
Manipulating the browser history
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。
网站栏目:Vue利用History记录上一页面的数据方法实例
URL地址:http://scyanting.com/article/podphh.html