1.場景

在處理列表時，常常有刪除一條資料或者新增資料之後需要重新重新整理當前頁面的需求。

2.遇到的問題

1. 用vue-router重新路由到當前頁面，頁面是不進行重新整理的

2.採用window.reload()，或者router.go(0)重新整理時，整個瀏覽器進行了重新載入，閃爍，體驗不好

3.解決方法

provide / inject組合

作用：允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。

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()呼叫，即可重新整理當前頁面。

export default {
    inject:['reload'],//注入reload方法
    data() {
        
 
return{}
    }，
    methods:{
        add(){
         .then(res => {
          if (res.err_code == 0) {   //資料請求成功後
            this.reload() //呼叫reload方法重新整理當前頁面
          }
        })
        .catch(res => {
          console.log(res);
        });
        }
    }
}