VUE实现局部刷新

利用Vue里面的provide+inject组合

• 首先需要修改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()