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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
Javascript中window.name属性详解
Nov 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
深入分析jQuery.one() 函数
2020/06/03 jQuery
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
django中静态文件配置static的方法
2018/05/20 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
医学生个人求职信范文
2013/09/24 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js