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存值、传值的时候刷新页面数据消失的解决办法。喜欢的可以关注一下。

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

相关文章
springMVC对jsp页面的数据进行校验
一. 使用注解校验 a) 引入校验依赖包 javax.validation validation-api 2.0.0.Final org.
1283 0
iOS中CoreData数据管理系列四——进行数据与页面的绑定
iOS中CoreData数据管理系列四——进行数据与页面的绑定
15 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向(十二)
数据库逆向就是通过读取数据库物理表schema信息,然后生成表单元数据,可以看成“dbfirst”模式,即先有数据库表,然后根据表生成元数据,逆向表单后续操作和普通动态表单类似。本文主要介绍了数据库逆向功能,在数据库表单已经存在的基础上,通过数据库逆向功能,快速生成元数据,不需要一行代码,我们就可以得到已有数据库的基本crud功能,包括API和UI。类似于phpmyadmin等数据库UI管理系统,但是比数据库UI管理系统更灵活,更友好。
35 0
Android Studio 使用Intent实现页面的跳转(带参数)
不管是在APP,还是在网站中,页面之间的跳转都是很常见的,本文主要讲一下在APP中,如何通过Intent实现页面的跳转。   不带参数: 写在MainActivity页面的代码: 1 Intent intent = new Intent(); 2 intent.
2455 0
解决 webpack-dev-server 不能自动刷新的问题
原文发表于我的技术博客 此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。 原文发表于我的技术博客 1. webpack 不能热加载的问题 主要的问题是各个版本之间的兼容性问题,请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件,然后完整删除 node_modules 文件夹后,在项目文件夹下执行 npm install 即可。
1062 0
Android 页面跳转传递参数及页面返回接收参数
HelloWorldActivity.java package syit.david; import android.
794 0
fbh
Chrome浏览器强制刷新页面(不使用缓存)
在Chrome浏览器中按下F5或 Ctrl+F5 都没用,Chrome总是会强制使用页面缓存进行刷新,如何不使用页面缓存进行刷新? Chrome官方推荐使用如下快捷键,就可以不使用页面缓存进行刷新 Windows和Linu...
3579 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vuejs作为前端框架,vuejs轻量、简单的特性使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。
2349 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
50
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载