VUE 返回页面刷新数据

VUE 返回页面刷新数据

监听路由

watch: {
	//不推荐 用户体验不好
	'$route' (to, from) {
   		 // 路由发生变化页面刷新
		this.$router.go(0);
	}
},
watch: {
	'$route' (to, from) {
   		this.方法名();//返回页面直接调取方法
	}
},

有什么问题欢迎评论留言,我会及时回复你的

当进行F5页面刷新时,Vue页面数据会丢失的原因是因为Vuex存储的数据只是在页面中,相当于全局变量,页面刷新Vuex里的数据会重新初始化导致数据丢失。这是因为Vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载Vue实例,Vuex里面的数据就会被重新赋值。 解决这个问题的思路有多种方法。其中一种方法是在父页面向后台请求远程数据,并且在页面刷新前将Vuex的数据先保存至sessionStorage,以防请求数据量过大页面加载时拿不到返回数据。这样在页面刷新后,可以从sessionStorage中获取之前保存的数据并重新赋值给Vuex,以保持页面数据不丢失。 另一种方法是使用传参和返回函数的方式,在Vuex的show函数中返回一个函数,该函数接收参数,并返回数据。这样即使页面刷新,通过传参和返回函数的方式可以重新获取之前的数据,而不会导致数据丢失。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue刷新页面数据丢失问题的解决过程](https://blog.csdn.net/qq_41221596/article/details/128162300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值