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() //直接使用该方法
}
}
},
总结:前两种方法会出现白屏现象,推荐使用第三种方法
文章来自:https://www.cnblogs.com/cjechenjinge-0820/p/12051416.html