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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
element中的$confirm的使用
Apr 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
javascript String 对象
2008/04/25 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
numpy基础教程之np.linalg
2019/02/12 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
安全生产专项整治方案
2014/05/06 职场文书
市场营销工作计划书
2014/05/06 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle