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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
详解Node 定时器
Feb 26 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
一个PHP的String类代码
2010/04/20 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php单一接口的实现方法
2015/06/20 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
python实现ping的方法
2015/07/06 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python正则表达式之对号入座篇
2018/07/24 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
初中毕业感言300字
2015/07/31 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS