vue项目中数据改变之后刷新页面
Posted cjechenjinge-0820
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue项目中数据改变之后刷新页面相关的知识，希望对你有一定的参考价值。
页面实时更新的方法：
1.window.onload.reload()
2.this.$route.go(0)
3.推荐使用该方法刷新页面
① <router-view v-if="isRouterAlive"/>
② APP组件中操作：
data 中定义变量
data () {
return {
isRouterAlive: true
}
}
③ methods中定义方法
reload() {
this.isRouterAlive = false
this.$nextTick(function () { //在下次dom更新循环结束之后执行延迟回调。数据更新之后立即使用这个方法，获得更新后的dom
this.isRouterAlive = true
})
},
④ 将该方法provide出去
provide () {
return {reload: this.reload}
},
⑤前面四步就将该方法在app中设置完成，接下来组件中引用该方法
export default {
inject: [‘reload‘], // 引入页面同步刷新的依赖
methods:{
getMag(){
this.reload() //直接使用该方法
}
}
},
总结：前两种方法会出现白屏现象，推荐使用第三种方法
以上是关于vue项目中数据改变之后刷新页面的主要内容，如果未能解决你的问题，请参考以下文章