vue传参页面刷新数据丢失问题-阿里云开发者社区

开发者社区> 小周sir> 正文

vue传参页面刷新数据丢失问题

简介: vue传参页面刷新数据丢失问题
+关注继续查看


在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个问题。通过了一下几种情况进行传值:

通过路由params传参
通过路由query传参
通过vuex
1.通过params传参

先在路由path里那个组件需要传递参数,定义一个参数,用于组件传递,params刷新页面数据会丢失。

path: "/chatView/:user"
//这里值用:加参数的写法,user即为参数,注意一定要用/隔开

在你的组件中,通过点击传递参数,targetUser传的参数

然后需要用的组件接受,通过beforeRouteEnter进入路由之前执行的函数

1.通过query传参

路由传值有两种方式,params和query,params传值刷新页面是要消失的,然而query却不会,两者的区别就在于query会把传递的参数显示在url地址中,就像下面这样

也是在你的组件中,执行什么方法。触发什么事件,把参数传递过去

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

 

 然后需要用的组件接受,通过beforeRouteEnter进入路由之前执行的函数

这样无论怎么刷新,数据都不会丢失。

3.通过vuex取

 最好办的就是通过vuex来存和取你的数据,把你的数据都存在vuex中,然后那个组件需要,直接调用vuex的getters来获取数据就行。

在你的getters文件中

在组件中如果想取到的话,直接通过计算属性。

 

以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。喜欢的可以关注一下。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【js 方法】js 页面刷新location.reload和location.replace的区别 【转】
【转】:http://zccst.iteye.com/blog/2162658   reload 方法,该方法强迫浏览器刷新当前页面。 语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。
821 0
springMVC对jsp页面的数据进行校验
一. 使用注解校验 a) 引入校验依赖包 javax.validation validation-api 2.0.0.Final org.
1287 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信)
前言 本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。
2427 0
Android Studio 使用Intent实现页面的跳转(带参数)
不管是在APP,还是在网站中,页面之间的跳转都是很常见的,本文主要讲一下在APP中,如何通过Intent实现页面的跳转。   不带参数: 写在MainActivity页面的代码: 1 Intent intent = new Intent(); 2 intent.
2465 0
Android 页面跳转传递参数及页面返回接收参数
HelloWorldActivity.java package syit.david; import android.
796 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vuejs作为前端框架,vuejs轻量、简单的特性使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。
2354 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载