Vue刷新页面方式详解

业务需求/问题描述

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

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

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

//父组件
<子组件 v-if='load'>
export default{data(){load = true},methods:{refresh(){this.load = falsethis.$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利用副作用一样