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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
redis 队列操作的例子(php)
2012/04/12 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
js数组的操作指南
2014/12/28 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python flask中静态文件的管理方法
2018/03/20 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python实现年会抽奖程序
2019/01/22 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
人事专员职责
2014/02/22 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书