vue传参页⾯刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页⾯刷新的时候,数据会丢失,不到数据。今天经过总结,解决了这个问题。通过了⼀下⼏种情况进⾏传值:
通过路由params传参
通过路由query传参
通过vuex
1.通过params传参
先在路由path⾥那个组件需要传递参数,定义⼀个参数,⽤于组件传递,params刷新页⾯数据会丢失。
path: "/chatView/:user"
//这⾥值⽤:加参数的写法,user即为参数,注意⼀定要⽤/隔开
在你的组件中,通过点击传递参数,targetUser传的参数
然后需要⽤的组件接受,通过beforeRouteEnter进⼊路由之前执⾏的函数
vue json字符串转数组1.通过query传参
路由传值有两种⽅式,params和query,params传值刷新页⾯是要消失的,然⽽query却不会,两者的区别就在于query会把传递的参数显⽰在url地址中,就像下⾯这样
也是在你的组件中,执⾏什么⽅法。触发什么事件,把参数传递过去
JSON.stringify() ⽅法是将⼀个JavaScript值(对象或者数组)转换为⼀个 JSON字符串
然后需要⽤的组件接受,通过beforeRouteEnter进⼊路由之前执⾏的函数
这样⽆论怎么刷新,数据都不会丢失。
3.通过vuex取
最好办的就是通过vuex来存和取你的数据,把你的数据都存在vuex中,然后那个组件需要,直接调⽤vuex的getters来获取数据就⾏。
在你的getters⽂件中
在组件中如果想取到的话,直接通过计算属性。
以上是路由传参和vuex存值、传值的时候刷新页⾯数据消失的解决办法。喜欢的可以关注⼀下。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。