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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
Javascript 事件流和事件绑定
Jul 16 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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提取中文首字母
2008/04/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
公司节能减排倡议书
2014/05/14 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
师范大学生求职信
2014/06/13 职场文书
无房证明范本
2014/09/17 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
运动会加油稿20字
2014/11/15 职场文书
关于五一放假的通知
2015/08/18 职场文书
Python图片检索之以图搜图
2021/05/31 Python
Python实现抖音热搜定时爬取功能
2022/03/16 Python