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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
js Date概念详细介绍
Nov 22 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 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中使用gettext来支持多语言的方法
2011/05/02 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
js中this对象用法分析
2018/01/05 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python 多进程通信模块的简单实现
2014/02/20 Python
python django集成cas验证系统
2014/07/14 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
高中物理教学反思
2014/02/08 职场文书
村居抓节水倡议书
2014/05/19 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
研讨会通知
2015/04/27 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android