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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python读取键盘输入的2种方法
2015/06/16 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Django后台admin的使用详解
2019/07/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
小学教师教学随笔
2015/08/14 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL