vue刷新页面的方法_vue局部刷新页面什么是vue

业务需求/问题描述

在项目中经常遇到一个问题，例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。这时我们可以考虑的方式如下

①（推荐）v-if刷新页面，并依赖注入

（不太清楚的小伙伴可以看我之前的文章）

//父组件
<子组件 v-if='load'>
export default{ 
   
	data){ 
   
		load = true
	},
	methods:{ 
   
		refresh){ 
   
			this.load = false
			this.$nextTick)=>{ 
   
				this.load = true
			})
		},
	}
	provide){ 
   
		return{ 
   
			refresh:this.refresh,
		}
	}
}
//子组件中 当提交表单时候直接调用即可
export default{ 
   
	inject:['refresh'],
	methods:{ 
   
		this.refresh)
	}
}

②父组件提供方法子组件通过$parent更新页面和依赖注入方式相同)

//父组件
export default{ 
   
	methods:{ 
   
		refresh){ 
   
			//向服务器发请求
		}
	}
}
//子组件
export default{ 
   
	methods:{ 
   
		this.$parent.refresh)
	}
}

③（不推荐）this.$router.go0)和location.reload)

this.$router.go利用history中前进和后退的功能，传入0刷新当前页面。但是这种方式，重新刷新当前页，如果这个页面文件比较大，白屏时间比较长，会影响用户体验。location.reload)和this.$router.go利用副作用一样