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 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
对layui中表单元素的使用详解
Aug 15 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 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
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中利用xpath解析HTML的方法
2018/05/14 Python
python实现图片文件批量重命名
2020/03/23 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
NumPy中的维度Axis详解
2019/11/26 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python中加背景音乐如何操作
2020/07/19 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
SQL面试题
2013/12/09 面试题
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python