VUE实现局部刷新

我们可以利用Vue里面的provide+inject组合

• 首先需要修改App.vue

  //App.vue
  <template>
    <div id="app">
      <div>
        <router-view v-if="alive" />
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'App',
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        alive: true
      }
    },
    methods: {
      reload() {
        this.alive= false
        this.$nextTick(() => {
          this.alive = true
        })
      }
    }
  }
  </script>
  

• 其次到需要刷新的页面进行引用

  使用inject导入引用reload

   inject: ['reload'],
   this.reload()