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