UI

![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181102140311509-821423154.jpg)
![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181102140318832-1421357415.jpg)

需求

  1. 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
  2. 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。

<!--more-->

技术选择

  1. 使用vue-router组件,通过this.$router.push({path: path, query: query});方式,将页码选择条件作为参数存储在url中,这种方式在上面的UI设计中是可行的,但是当列表页中包含tab组件时(分页组件是公用的),会因为push的因素(因为push会打开新页面)导致一些问题(PS:也可能是本人技术能力的原因),未实现。
  2. 使用History API(HTML5开始支持),通过history.replaceState方式,将页码作为参数存储在url中,将选择条件存储在history中(尚不清楚数据具体是存储在哪里);通过location.hash方式获取页码;通过history.state方式获取存储的选择条件。

具体实现--技术选择2

开关

为分页组件添加一个开关(openroute),因为需要灰度上线,万一有问题,要调整的页面也只有一个。代码如下:

&lt;script&gt;
export default {
props: {
openroute: {
type: Boolean,
default: () =&gt; (true)
}
},
}
&lt;/script&gt;

分页组件中存储页码选择条件&获取页码

&lt;script&gt;
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 &amp;&amp; location.hash &amp;&amp; location.hash.split("#") &amp;&amp; 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 &amp;&amp; location.hash.split("#") &amp;&amp; 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 &amp;&amp; location.hash.split("#") &amp;&amp; location.hash.split("#")[1]) {
newPage = Number(location.hash.split("#")[1]);
} else {
newPage = 1;
}
} else {
newPage = page;
}
//请求数据,获得结果,传递给列表页面
}
}
}
&lt;/script&gt;

列表页面获取选择条件

目前可能是因为框架设计的问题,没法在请求数据之前通过Object.assign方式为替换初始变量,所以先这样处理(笨方法,各位大佬有解决办法麻烦指导下,谢谢):

&lt;script&gt;
export default {
data() {
return {
form: {
aaa: (history.state &amp;&amp; history.state.aaa) ? history.state.aaa : null,
bbb: (history.state &amp;&amp; history.state.bbb) ? history.state.bbb : null,
ccc: (history.state &amp;&amp; history.state.ccc) ? history.state.ccc : null
},
};
}
};
&lt;/script&gt;

已解决,初始变量不需要动,可以通过以下方式实现:

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记录上一页面的数据的更多相关文章

  1. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  2. 微信小程序使用页面栈改变上一页面的数据

    微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...

  3. 微信小程序-返回并更新上一页面的数据

    小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还 ...

  4. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  5. git history 记录(上传到 issu-170 )

    一.上传到gitlab 本地issu-170落后git很多,发生冲突的要手动修改. 2000 cd robot_demo_0226_ws/ 2001 ls 2002 cd IGV01-SW-170 2 ...

  6. 03 . Gin+Vue开发一个线上外卖应用(用户数据创建,插入,跨域处理)

    功能和背景介绍 在项目的登录功能中,如果在登录时发现用户名和密码在用户表中不存在,会自动将用户名和密码保存在用户表中,创建一个新的用户. 因此,除了使用手机号和验证码登录以外,还支持使用用户名.密码进 ...

  7. 返回上一页面带数据 getCurrentPages 使用

    https://blog.csdn.net/She_lock/article/details/81099449

  8. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  9. 微信小程序在当前页面设置其他页面的数据

    如果其他页面用到的数据是 globalData, 那么直接在当前页面修改 globalData 数据即可. 如果其他页面用到的数据是 storage, 那么直接在当前页面修改 storage 数据即可 ...

随机推荐

  1. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. Hive 基本语法操练(四):Hive 复合类型

    hive语法中主要提供了以下复合数据类型: 1)Structs: structs内部的数据可以通过DOT(.)来存取.例如,表中一列c的类型为STRUCT{a INT; b INT},我们可以通过c. ...

  3. JAVA 多线程 Callable 与 FutureTask:有返回值的多线程

    java多线程中,如果需要有返回值,就需要实现Callable接口. 看例子: 先建立一个Dowork这个类,就是平时某个业务的实现 package com.ming.thread.one; impo ...

  4. 工作经验(JNI篇)

    我的工作是C++开发,主要是做底层的,由于要做跨平台的原因,常会做成JNI给Java调用,下面是工作时总结的经验希望有用 JNI只能使用C语言的方式编译,所以,要使用C++的话,要用 extern & ...

  5. DNS安全浅议、域名A记录(ANAME),MX记录,CNAME记录 专题

    首先要做的就是配置域名的MX 记录啦: 先添加一条A记录: mail.abc.com 指向 你的服务器IP! 然后添加域名的MX 记录,指向mail.abc.com A 记录( 即域名MX 记录的值为 ...

  6. OO 第四单元总结

    一.总结本单元两次作业的框架设计 1.1. 需求分析 通过分析mdj文件可知,两次作业如果对于时间复杂度没有要求,可以不涉及任何数据结构,直接根据读入的UML_ELEMENT逐个分析得到各个函数的结果 ...

  7. 在wpf或winform关闭子窗口或对子窗口进行某个操作后刷新父窗口

    父窗口: ///<summary> ///弹出窗口  ///</summary> ///<param name="sender"></pa ...

  8. javascript设计模式之中介者模式

    /* * 小游戏演示中介者模式 * Home 按键 1 * Guest 按键 0 * 半分钟内看谁按下的次数多 * * 参与的对象: * 玩家 * 计分板 * 中介者 * * 中介者模式使对象之间松耦 ...

  9. iOS核心动画高级技巧之核心动画(三)

    iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结( ...

  10. 部署webservice到远程服务器

    在本地编写好webservice后并在本机验证正确后,在本地发布后,直接将发布时设置的文件夹复制到远程服务器上,在远程服务器的IIS上默认网站->新建虚拟目录->设置别名->物理路径 ...