1.場景

在處理列表時，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當前頁面的需求。

2.遇到的問題

1. 用vue-router重新路由到當前頁面，頁面是不進行刷新的
2.采用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好

3.解決方法

provide / inject 組合

作用：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。

App.vue:

聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載

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

tableList.vue:

在頁面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當前頁面。

export default {
      name: "Header3",
      inject:['reload'],
      methods:{
        loginOut() {
          this.$confirm('此操作將退出登陸, 是否繼續(xù)?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('LogOut').then(() => {
              this.$router.push('/');
              this.reload() // 為了重新實例化vue-router對象 避免bug
            })
          });
        },
      }
}

4.provide / inject 用法

provide：選項應該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。
inject：一個字符串數(shù)組，或一個對象，對象的 key 是本地的綁定名
提示：provide 和 inject 綁定并不是可響應的。這是刻意為之的。如果你傳入了一個可監(jiān)聽的對象，那么其對象的屬性還是可響應的。