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.go(0)和location.reload()

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