在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之九 一些瑕疵说明
Jun 21 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
浅析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之第三天
2006/10/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python单例模式实例解析
2018/08/28 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
三个儿子教学反思
2014/02/03 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
2014年城管工作总结
2014/11/20 职场文书
2014年校长工作总结
2014/12/11 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
2015年父亲节寄语
2015/03/23 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
如何用python绘制雷达图
2021/04/24 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python中npy和mat文件的保存与读取
2022/04/24 Python