在vue中优雅地实现简单页面逆传值

关键词：

【需求】

　　要实现的需求很简单，页面从A -> B，用户在B触发操作，将一些数据带回到A页面，在网上找了好久也只看到有人问，但总找不到很好答案。要实现的效果图如下:

【联想】

　　在 ios 开发中，页面跳转 A -> B -> C，到 C 页面后，内存中一直存储着 A 和 B 页面的数据和状态，通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等，另外还有代理，block传值等操作。　　

　　vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性。

【尝试】

　　在 three 页面中打印路由相关信息，如下：

　　本来是想在其对象中查看是否有可操作的对象，但发现都不好操作甚至太麻烦，并不像 ios 中一样。然后尝试对其中一些对象 prototype 或 __proto__ 主动添加想要存储的数据，实际结果也是要么报错不通过，要么路由切换时数据就没了。

　　这两天又重新看了看vue的官网指导，发现除了全局路由有对应的时机方法，对于组件路由也有几个对应的钩子函数。

　　在第三个页面中实现 beforeRouteLeave，打印对应的参数发现确实可以拿到前到路由。如下:

【相关代码】

　　/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组件传值及页面缓存问题

...义事件，然后在组件中用eventBus订阅自定义事件。就可以实现传值。详细讲解可看链接（6）Vue.observableindex.vue组件中触发：Vue中如何在切换组件过程中，将状态保存到内存中，防止DOM重新渲染，通俗的讲就是实现如何在一个页面... 查看详情

vue-(10)页面跳转-传值

...只要创建好Vue项目，其他的不用管了，直接用vue-router来实现页面跳转-传值。在页面HelloWord.vue点击按钮，跳转到页面textVue.vue，并且传值一，创建两页面，跳转-传值1，这里我们用Vue框架自带的页面HelloWord.vue，然后自己创建一个... 查看详情

vue中点击空白处隐藏弹框（用指令优雅地实现）(代码片段)

在写vue的项目的时候，弹框经常性出现，并要求点击弹框外面，关闭弹框，那么如何实现呢？且听我一一。。。不了，能实现效果就好<template><div><divclass="show"v-show="show"v-clickoutside="handleClose">显示</div></div>&l... 查看详情

如何在vue中优雅地使用v-if判断(代码片段)

情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。<template><divclass="card"... 查看详情

vue选择性刷新组件&如何实现优雅的刷新页面

在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。列举个场景，比如修改... 查看详情

vue3中如何优雅地在setup使用globalproperties(代码片段)

一、前言vue3已经发布到v3.2.x版了，在项目中也使用上了vue3，总体感觉还是不错的。vue3中使用Proxy来实现响应式数据，解决了vue2中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问... 查看详情

java应该如何优雅地实现单元测试与集成测试

在日常的开发过程中，为了保证代码质量，有追求的程序员一般都会对自己编写的代码进行充分的测试，这种测试不仅仅是体现在对正常功能的简单接口调用，而是要根据代码中的各种逻辑分支，进行尽可能多的覆盖性单元测试... 查看详情

如何在uniapp中优雅地使用webview(代码片段)

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助从webview页面传值到uniapp中官方文档已经很详细了,这里给大家上我的实战代码，首先在webview页面中引入相关依赖：<!--uniapp各平台依赖--><scriptt... 查看详情

vue点击按钮打开组件并向组件传值

参考技术A将要实现在页面中添加一个按钮打开一个弹窗组件，并把一个object传给子组件。项目里使用了element-ui。页面获取add-Info组件：vales是本页面要传的数据，:isvisibleadd判断按钮点击时打开子组件当点击click后:isvisibleadd等于tr... 查看详情

vue组件中传值eventbus的使用及注意事项

...在特定的页面才展示，项目里是在lottery.vue页面，然后想实现app.vue里点击分享按钮，触发lottery.vue里的分享方法。解决：使用eventBus1、创建一个event-bus.jsimportVuefrom‘vue‘exportconstEve 查看详情

struts2的action怎么向页面传值?

...法。【方法1】使用Struts2Aware拦截器这种方法需要Action类实现相应的拦截器接口。如我们要获得HttpServletResponse对象，需要实现org.apache.struts2.interceptor.ServletResponseAwa 查看详情

vue页面传值能传图片吗

...的路径存值到表单对象中代码范例我们以阿里的OSS服务来实现，们试着来封装一个OSS的图片上传组件。通过element-ui的upLoad组件的http-request参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制... 查看详情

如何优雅地实现c++编译期多态？

导语 | 前面的文章中我们更多的聚焦在运行期反射，本篇我们将聚焦在一个与反射使用的机制有所类同，但更依赖编译期特性的机制->编译期多态实现。引言前面的文章中我们更多的聚焦在运行期反射，本篇我们... 查看详情

vue页面间传值

...不到先前界面的因为它记录的是页面路劲，所以如果想要实现可以返回的界面切换最好要用path路径来push//本地存//用的时候取还有一个sessionStorage缓存传值和localStorage的操作类似WebStorage的目的是克服由cookie所带来的一些限制，当... 查看详情

页面传值

本文实例总结了C#实现.net页面之间传值传参方法。分享给大家供大家参考。具体实现方法分析如下：一、QueryString传值一般来说，QueryString是一种非常简单的传值方式，他可以将传送的值显示在浏览器的地址栏中。如果是传递一... 查看详情

vue简单实现父组件向子组件传值，简单来说就是子组件肆意妄为的调用父组件里后台返回的值(代码片段)

首先在于父子组件传值的方法很多，本人在这里只是简单描述一下一个组件里面引用了子组件，那么子组件如何才能获取父组件中后台返回的值呢？首先调用组件相信大家都应该明白了（不明白的自己撸撸文档），<info-head:orde... 查看详情

如何优雅地运用位运算实现产品需求？(代码片段)

如何优雅地运用位运算实现产品需求？在开始正文之前，我们先来说一下Linux的系统权限设计。在Linux系统中，为了保证文件的安全，对文件所有者、同组用户、其他用户的访问权限进行了分别管理。其中，文件所有者，即建立... 查看详情

vue使用ifram标签解决父子页面传值，触发事件的操作(代码片段)

...果只是Vue两个父子组件的传值或者调用，其实是非常简单的，百度一下，就能出现很多。这里就不一一赘述了。在明确了以上的点以后，开始这一次的分享。首先先说一下，没有在Vue框架中，就是单纯的HTM... 查看详情