在做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存值、传值的时候刷新页面数据消失的解决办法。喜欢的可以关注一下。
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
vue 路由传参中刷新页面参数丢失 及传参的几种方式？
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:
关于Vue-$router传参出现刷新页面或者返回页面丢失数据的问题
也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式params或者query 1.query this.$rou ...
vue页面刷新数据丢失问题
参考: https://blog.csdn.net/aliven1/article/details/80743470 https://blog.csdn.net/liang37712 ...
npm安装vuex及防止页面刷新数据丢失
npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...
vue常见问题处理 -- 页面刷新时，如何保持原有vuex中的state信息
一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...
vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
随机推荐
github 托管代码两分钟教程【转载，亲测可行】
http://blog.csdn.net/duxinfeng2010/article/details/8654690 出自以上地址 本篇文章介绍的是如何将工程代码托管到上面:如果你还没注册GitHub ...
Android Marquee
android:singleLine="true" android:marqueeRepeatLimit="marquee_forever" android:e ...
validform 一行代码完成所有验证
validform一行代码完成所有验证 在使用的时候想更改提示效果为右侧提示却一直不能成功 tiptype可以为1.2 和 自定义函数.2 表示右侧提示. 注意:tiptype为 2 时,各表单元素对 ...
《Java编程思想》第一二章
前段时间一直通过网络教程学习Java基础,把面向对象部分学完之后本来打算继续深入学习,但是感觉自己操之过急了,基础根本不够扎实,所以入手了一本,希望先把基础打好,再深入 ...
datetimepicker.js 使用笔记
1.官网地址 官网传送门 2.属性及使用示例 2.1调用 html:
LeetCode 15 输入无序、有重复，输出排重版 3-Sum
V1 粗暴的遍历,时间复杂度O(N³) func threeSumClosest(nums []int, target int) int { min := 0 result := 0 for i := ...
django 2.1 配sql server 2008R2
请教了不少高手和度娘终于把这个事搞定了(基本上断断续续查试了2周时间),,,,,,,, 环境: 1-Microsoft Windows 2-Microsoft SQL SERVER2008 ...
初级安全入门—— WEBshell与文件上传漏洞
概念介绍 WebShell网页木马文件 最常见利用文件上传漏洞的方法就是上传网站木马(WebShell)文件,根据开发语言的不同又分为ASP木马.PHP木马.JSP木马等,该木马利用了脚本语言中的系统 ...
Linux下jdk、Tomcat、MySQL的安装
1. 安装JDK 1.上传jdk-7u45-linux-x64.tar.gz到Linux上(使用WinSCP工具) 2.解压jdk到/usr/local目录 tar -zxvf jdk-7u45- ...