Vue利用History记录上一页面的数据方法实例


Posted in Javascript onNovember 02, 2018

前言

本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有‘#'的问题,下面话不多说了,来一起看看详细的介绍吧

UI

Vue利用History记录上一页面的数据方法实例

Vue利用History记录上一页面的数据方法实例

需求

从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;

从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。

<!--more-->

技术选择

  • 使用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),因为需要灰度上线,万一有问题,要调整的页面也只有一个。代码如下:

<script>
 export default {
 props: {
 openroute: {
 type: Boolean,
 default: () => (true)
 }
 },
 }
</script>

分页组件中存储页码和选择条件&获取页码

<script>
 export default {
 methods: {
 fetchData(page) {
 //请求参数
 let params = this.params;
 //请求页码
 let newPage;
 //openroute处理
 if (this.openroute) {
 //为url添上#page
 if (page) {
 history.replaceState(params.data, document.title, "#" + page);
 } else {
 if (history.state) {
 if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //选择条件变更则请求第一页
  history.replaceState(params.data, document.title, "#1");
 } else {
  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 }
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 } else {
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 }
 }
 //获取url后面的#page
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 newPage = Number(location.hash.split("#")[1]);
 } else {
 newPage = 1;
 }
 } else {
 newPage = page;
 }
 //请求数据,获得结果,传递给列表页面
 }
 }
 }
</script>

列表页面获取选择条件

目前可能是因为框架设计的问题,没法在请求数据之前通过Object.assign方式为替换初始变量,所以先这样处理(笨方法,各位大佬有解决办法麻烦指导下,谢谢):

<script>
 export default {
 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
 },
 };
 }
 };
</script>

已解决,初始变量不需要动,可以通过以下方式实现:

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

分析(这篇文章有源码分析( <font color='red'>求解答:WebStorm中如何关联源码?</font>),很棒):

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jquery 上下滚动广告
Jun 17 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
简单的jQuery入门指引
Jul 28 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
You might like
yii框架源码分析之创建controller代码
2011/06/28 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
用Eclipse写python程序
2018/02/10 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
小学六年级学生评语
2014/04/22 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2014年超市工作总结
2014/11/19 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书