在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 的 prototype问题。
Jan 03 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
利用layer实现表单完美验证的方法
Sep 26 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
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python PIL模块的基本使用
2020/09/29 Python
python绘制高斯曲线
2021/02/19 Python
使用索引有什么好处
2016/07/27 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
留学推荐信怎么写
2014/01/25 职场文书
校本教研活动总结
2014/07/01 职场文书
异地年检委托书范本
2014/09/24 职场文书
公司仓管员岗位职责
2015/04/01 职场文书