Vue global refresh and partial refresh

Let me talk about the difference first:

• Global refresh: refers to the overall refresh of the page, there will be blank and flickering
• Partial refresh: refers to a refactored load, there will be no blank
  global refresh:
  App.vue

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

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() { // 局部刷新
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  }
}
</script>

Specify page refresh reference:

inject: ['reload'], // 这个引用会报错，目前没找到更好解决办法
this.reload() // 需要刷新地方调用

Partial refresh:

<template>
	<div v-if="isRouterAlive">33333333</div>
	<div class="search-box" @click="search">
	 	<svg-icon icon-class="search-icon" class="search-icon" />
	</div>
</template>
<script>
provide() {
   return {
     reload: this.reload
   }
},
 data() {
  return {
  	isRouterAlive: true
  }
 },
 methods: {
    reload() { // 局部刷新
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    search() {
   	  this.reload()// 在需要局部刷新的地方进行调用
    }
}