Vue2刷新当前页面，并重新加载数据

实现原理：

        1、移除目标页面（当前页面）

        2、重新渲染目标页面

代码实现：

        在vue2中，我们需要用到provide和inject这对方法（它们总是成对出现的），这对方法可以让我们跨多层级进行通信。也可查看vue2跨组件通信。

App.vue

<template>
  <div id="app">
    <router-view  v-if="showRouterView"/>
  </div>
</template>


<script>
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      showRouterView:true
    }
  },
  methods: {
    reload (){
       // 改变this.showRouterView的状态，控制路由出口的显示隐藏
       this.showRouterView = false
       this.$nextTick(()=>{   // 必须使用nextTick，否则最新dom可能未更新，导致刷新失败
          this.showRouterView = true
       })
    }
  }
  
}
</script>

使用provide提供的方法或属性，可以在任意子孙级组件中通过inject获取。

某子孙组件

export default {
    inject:['reload'],
    data(){
        return {}
    },
    methods:{
        change(){
            // 页面逻辑执行完毕后调用reload方法
            this.reload();
        }
    }
}

使用inject注入的方法，相当于methods中的方法，可以直接使用。