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实现漂亮的动态信息提示效果
Aug 02 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
使用express来代理服务的方法
Jun 21 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
JavaScript实现图片上传并预览并提交ajax
Sep 30 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传输数据的代码
2007/11/13 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP四大安全策略
2014/03/12 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python读写配置文件的方法
2015/06/03 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
没编程基础可以学python吗
2020/06/17 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
手工社团活动方案
2014/02/17 职场文书
主办会计岗位职责
2014/03/13 职场文书
保险公司早会主持词
2014/03/22 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
vue的项目如何打包上线
2022/04/13 Vue.js