关于被 keep-alive 缓存的组件不能更新数据的问题

今天在写一个移动端的通过路由来跳转页面的功能时遇到一些问题:
1 、通过this.router.push({ path: ‘register’, query: { plan: ‘private’ }})的方法对页面进行来回跳转时,出现页面每次跳转都会刷新当前页面,但是我当前页面有form表单,这样会导致之前已经填写的内容会被重置,不符合要求。
于是我就在父组件使用了< keep-alive > 组件包裹我的页面内容,然后页面的内容被缓存了起来,再进行页面路由的跳转也确实没有重置之前写的内容,但是新问题出现了,我从其它页面通过路由参数传递的数据没有对指定的对象实例进行更新,所以导致第二问题。
2、被 keep-alive 缓存的组件不能更新数据的问题
首先要解决使用keep-alive组件导致页面的数据没有更新的问题之前,要了解keep-alive组件的作用:
keep-alive组件的作用:主要用于保留组件状态或避免重新渲染;< keep-alive > 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 < keep-alive > 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。而不会执行created和mounted的钩子函数。
所以要将需要更新的数据写在activated 的钩子函数里

data(){
	return {
		data:''
	}
}
activated(){
	//将上一个页面跳转的路由的参数赋值给data
	this.data = this.$route.query.id
}

这样就可以在页面通过路由跳转的时候动态更新自己需要的数据,而页面的form表单的其它数据保持之前填写的。

猜你喜欢

转载自blog.csdn.net/weixin_44939142/article/details/107071177
今日推荐