在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 parseInt与Number函数的区别
Jan 21 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
JS删除数组指定值常用方法详解
Jun 04 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
PHP中防止SQL注入实现代码
2011/02/19 PHP
php的常量和变量实例详解
2017/06/27 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python方向键控制上下左右代码
2018/01/20 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
《争吵》教学反思
2014/02/15 职场文书
城管综合整治方案
2014/05/01 职场文书
淘宝客服工作职责
2014/07/11 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
人民检察院起诉书
2015/05/20 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书