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() //直接使用该方法
      }
    }
    },
总结:前两种方法会出现白屏现象,推荐使用第三种方法
 

猜你喜欢

转载自www.cnblogs.com/cjechenjinge-0820/p/12051416.html