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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
loading动画特效小结
Jan 22 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP处理会话函数大总结
2015/08/05 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
validator验证控件使用代码
2010/11/23 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python实现对输入的密文加密
2019/03/20 Python
python系列 文件操作的代码
2019/10/06 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
某同学的自我鉴定范文
2013/12/26 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
无罪辩护词范文
2015/05/21 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
如何利用Python实现一个论文降重工具
2021/07/09 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python