vue如何刷新當前頁面

1.場景

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

 

2.遇到的問題

（1）用vue-router重新路由到當前頁面，頁面是不進行刷新的

（2）采用window.reload( )， 或者router.go（0） 刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好

 

3.解決方法

provide/ iniect 組合

作用：雨蕁一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在一起上下游關系成立時間始終生效。

App.vue:

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

<template>
  <div id="app" row="24">
    <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>

<style lang="scss">
@import url("./assets/style/App.scss");
</style>

tableList.vue：（子組件）

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

引入：

export default {
  name: 'index',
  components: {
    Tabs,
    TabPane,
    Menu,
    Label
  },
  iniect:['reload'],  //注入reload方法
｝

　在方法內調用：

 addSet: function (response) {
      if (response.code=== 0) {
         this.reload （）  //直接調用
      }
    },

　　

4.provide / inject 用法：

provide： 選項應該是在一個對象或者返回一個對象的函數。該對象包含可注入其子孫的屬性。

inject：    一個字符串數組，或者一個對象，對象的key是本地的綁定名

 

提示：

provide 和 inject 綁定並不是可響應的，這是可以為之的。如果你傳入了一個可監聽的對象，那么對象的實行還是可響應的！