Vue 使用History记录上一页面的数据
UI
![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181102140311509-821423154.jpg)
![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181102140318832-1421357415.jpg)
需求
- 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
- 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。
<!--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 数据即可 ...
随机推荐
- 去除 Git 安装后的右键菜单
64位 windows 8.1 安装 Git 后,右键菜单多了3个选项(Git Init Here,Git Gui, Git Bash),但是用不着,需要删掉.方法如下: 1.在 CMD 中进入 Gi ...
- svn地址迁移
关于svn设置如下: 1. 点击如果所示[Relocate]: 2. 会弹出两个框:一个让你输入用户名密码:一个是svn地址: 3. 先把svn地址改一下,然后输入用户名密码,点确定.就ok啦!
- Spring AOP——Spring 中面向切面编程
前面两篇文章记录了 Spring IOC 的相关知识,本文记录 Spring 中的另一特性 AOP 相关知识. 部分参考资料: <Spring实战(第4版)> <轻量级 JavaEE ...
- Maven的学习资料收集--(三)使用Maven构建Web项目
新建Maven项目 File - New - Other 选择Maven Project 单击Next 保持默认即可单击Next 选择Archetype为 web app单击Next 输入一些必要信息 ...
- 关于@webFilter使用@Order无效问题
前言 在SpringBoot系列文章的<第七章:过滤器.监听器.拦截器>中,小技巧中指出,可使用@Order设置过滤器的执行顺序.由于没有自己求证过,看了相关材料后,想当然的写进了文章中, ...
- SpringMVC10 InitBinder 注册自定义编辑器
1.配置web.xml文件 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...
- Python接入支付宝进行PC端支付
1. 支付宝开放平台登录,使用支付宝账号登录 https://open.alipay.com/platform/home.htm 2.选择沙箱模式 [支付宝提供了测试环境] https://docs ...
- 关于dom4j在maven中的使用
在maven中添加dom4j的依赖, (如何使用eclipse构建maven项目, 这里就不在赘述) <!-- https://mvnrepository.com/artifact/org.do ...
- 飞塔Web应用防火墙-FortiWeb
飞塔Web应用防火墙-FortiWeb 平台: fortiweb 类型: 虚拟机镜像 软件包: linux basic software Fortinet security SSL offloadin ...
- linux下配置Nginx,支持thinkphp
前言引入 一个刚入行的朋友,刚换工作,入职了一个新公司.新公司一个php开发,就是他.俨然老板把他当成公司扛把子了,把服务器都给了他,让他部署整个php的开发环境.那个朋友是wamp爱好者.然后面对l ...