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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
浅析js实现网页截图的两种方式
Nov 01 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图片上传存储源码并且可以预览
2011/08/26 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
js数组的操作详解
2013/03/27 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
js实现小时钟效果
2020/03/25 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
自我鉴定怎么写
2014/01/12 职场文书
军训自我鉴定100字
2014/02/13 职场文书
公司副总经理任命书
2014/06/05 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年信用社工作总结
2014/11/25 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL