Vue 使用History记录上一页面的数据
UI


需求
- 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
- 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。
<!--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>),很棒):https://www.cnblogs.com/libin...
FAQ
- 需要使用
history.replaceState
方式是因为:它不会将更改后的url压到history栈中,所以不会增加回退和前进的操作步数; - 使用
history.replaceState
方式,可存储的state大小不能操作640k; - 可能存在浏览器兼容性问题,请从此处查阅:https://caniuse.com/#feat=his...。
Demo Or Source
因为是公司项目,所以目前没有Demo或源码
参考文章
原文地址:https://segmentfault.com/a/1190000016876337
Vue 使用History记录上一页面的数据的更多相关文章
- vue 给嵌套的iframe子页面传数据 postMessage
Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...
- 微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
- 微信小程序-返回并更新上一页面的数据
小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还 ...
- vue中路由返回上一个页面,恢复到上一个页面的滚动位置
第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...
- git history 记录(上传到 issu-170 )
一.上传到gitlab 本地issu-170落后git很多,发生冲突的要手动修改. 2000 cd robot_demo_0226_ws/ 2001 ls 2002 cd IGV01-SW-170 2 ...
- 03 . Gin+Vue开发一个线上外卖应用(用户数据创建,插入,跨域处理)
功能和背景介绍 在项目的登录功能中,如果在登录时发现用户名和密码在用户表中不存在,会自动将用户名和密码保存在用户表中,创建一个新的用户. 因此,除了使用手机号和验证码登录以外,还支持使用用户名.密码进 ...
- 返回上一页面带数据 getCurrentPages 使用
https://blog.csdn.net/She_lock/article/details/81099449
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- 微信小程序在当前页面设置其他页面的数据
如果其他页面用到的数据是 globalData, 那么直接在当前页面修改 globalData 数据即可. 如果其他页面用到的数据是 storage, 那么直接在当前页面修改 storage 数据即可 ...
随机推荐
- JS——制作简单的网页计算器
用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- Hive 基本语法操练(四):Hive 复合类型
hive语法中主要提供了以下复合数据类型: 1)Structs: structs内部的数据可以通过DOT(.)来存取.例如,表中一列c的类型为STRUCT{a INT; b INT},我们可以通过c. ...
- JAVA 多线程 Callable 与 FutureTask:有返回值的多线程
java多线程中,如果需要有返回值,就需要实现Callable接口. 看例子: 先建立一个Dowork这个类,就是平时某个业务的实现 package com.ming.thread.one; impo ...
- 工作经验(JNI篇)
我的工作是C++开发,主要是做底层的,由于要做跨平台的原因,常会做成JNI给Java调用,下面是工作时总结的经验希望有用 JNI只能使用C语言的方式编译,所以,要使用C++的话,要用 extern & ...
- DNS安全浅议、域名A记录(ANAME),MX记录,CNAME记录 专题
首先要做的就是配置域名的MX 记录啦: 先添加一条A记录: mail.abc.com 指向 你的服务器IP! 然后添加域名的MX 记录,指向mail.abc.com A 记录( 即域名MX 记录的值为 ...
- OO 第四单元总结
一.总结本单元两次作业的框架设计 1.1. 需求分析 通过分析mdj文件可知,两次作业如果对于时间复杂度没有要求,可以不涉及任何数据结构,直接根据读入的UML_ELEMENT逐个分析得到各个函数的结果 ...
- 在wpf或winform关闭子窗口或对子窗口进行某个操作后刷新父窗口
父窗口: ///<summary> ///弹出窗口 ///</summary> ///<param name="sender"></pa ...
- javascript设计模式之中介者模式
/* * 小游戏演示中介者模式 * Home 按键 1 * Guest 按键 0 * 半分钟内看谁按下的次数多 * * 参与的对象: * 玩家 * 计分板 * 中介者 * * 中介者模式使对象之间松耦 ...
- iOS核心动画高级技巧之核心动画(三)
iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结( ...
- 部署webservice到远程服务器
在本地编写好webservice后并在本机验证正确后,在本地发布后,直接将发布时设置的文件夹复制到远程服务器上,在远程服务器的IIS上默认网站->新建虚拟目录->设置别名->物理路径 ...