vue項目如何刷新當前頁面

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);
        });
        }
    }
}