在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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
Exjs 入门篇
Apr 07 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Python入门_浅谈for循环、while循环
2017/05/16 Python
python中关于for循环的碎碎念
2017/06/30 Python
django实现前后台交互实例
2017/08/07 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
中专生学习生活的自我评价分享
2013/10/27 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
事业单位请假制度
2014/01/13 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
歼十出击观后感
2015/06/11 职场文书
2019入党申请书格式
2019/06/25 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS