在vue中实现简单页面逆传值的方法


Posted in Javascript onNovember 27, 2017

【需求】

要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案。要实现的效果图如下:

在vue中实现简单页面逆传值的方法

【联想】

在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作。

vue是一个单页应用,轻量,并且不会重复下载数据。当它从一个页面跳转到另一个页面时,原来的页面的vue实例和相关数据已经销毁了,要实现逆传值就要找到操作的对象及它的一些属性。

【尝试】

在 three 页面中打印路由相关信息,如下:

在vue中实现简单页面逆传值的方法

本来是想在其对象中查看是否有可操作的对象,但发现都不好操作甚至太麻烦,并不像 ios 中一样。然后尝试对其中一些对象 prototype 或 __proto__ 主动添加想要存储的数据,实际结果也是要么报错不通过,要么路由切换时数据就没了。

这两天又重新看了看vue的官网指导,发现除了全局路由有对应的时机方法,对于组件路由也有几个对应的钩子函数。

在第三个页面中实现 beforeRouteLeave,打印对应的参数发现确实可以拿到前后路由。如下:

在vue中实现简单页面逆传值的方法

【相关代码】

/three 页面中的 input 与变量 selVal 绑定,然后在此页面的路由方法中,判断如果是回第二个页面,则将要传的参数赋值到对应query 或 params中,params 中的数值如果用户刷新当前页面参数值会丢失,而query则是拼接在 url 后面,刷新页面值也不会丢失。如下:

beforeRouteLeave(to, from, next) {
  if (to.name == 'Two') {
   to.query.temp = this.selVal;
  }
  next();
 }

在 /two 页面的 mounted 方法中获取相应的值

mounted() {
  if (this.$route.query.temp) {
   this.temp = this.$route.query.temp;
  }
 }

这样就完了,真想说句靠,怎么原来就没发现呢,之前实现这些还想着 keepalive 或使用 vuex 等等,想想那样麻烦多了。

ps: 这种简单的逆传值是这样实现没错,但如果 /two 页面在进入 /three 页面之前用户进行了大量临时性操作,到 /three 页页回来还需要继续保持这些大量的操作就比较困难了,这个就等下期博客贴出来了。

总结

以上所述是小编给大家介绍的在vue中实现简单页面逆传值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
Javacript中自定义的map.js  的方法
Nov 26 #Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 #Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 #Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 #Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php中的boolean(布尔)类型详解
2013/10/28 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript数组去掉重复
2011/05/12 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
linux下python抓屏实现方法
2015/05/22 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python urllib爬虫模块使用解析
2019/09/05 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python中的插入排序的简单用法
2021/01/19 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
房产委托公证书
2014/04/08 职场文书
管理标语大全
2014/06/24 职场文书
毕业生学校组织意见
2015/06/04 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL