在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中出现乱码的处理心得
Dec 24 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
js本地图片预览实现代码
Oct 09 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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中使用session防止用户非法登录后台的方法
2015/01/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
js 获取、清空input type="file"的值示例代码
2014/02/19 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python实现感知器算法详解
2017/12/19 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python的pygame安装教程详解
2020/02/10 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
static关键字的用法
2013/10/07 面试题
师范毕业生自荐信
2013/10/17 职场文书
利群广告词
2014/03/20 职场文书
书香校园建设方案
2014/05/02 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
郭明义电影观后感
2015/06/08 职场文书
安全守法证明
2015/06/23 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书