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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
angular之ng-template模板加载
Nov 09 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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获取页面title例子
2015/01/07 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
react的hooks的用法详解
2020/10/12 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
介绍Python中的文档测试模块
2015/04/28 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python selenium循环登陆网站的实现
2019/11/04 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
无线电通信名词解释
2022/02/18 无线电