vue 全局刷新与局部刷新

首先说下区别：

• 全局刷新：是指页面整体刷新，会出现空白，闪烁的情况
• 局部刷新：是指某个进行重构加载，不会出现空白
  全局刷新：
  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>

指定页面刷新引用：

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

局部刷新：

<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()// 在需要局部刷新的地方进行调用
    }
}