Vue中刷新當前路由的方法

問題場景

• 項目開發中經常會遇到完成某些操作，刷新當前路由的需求。
  • 問題：比如當我們使用動態組件時，從列表頁進入編輯頁面，沒有牽扯到路由的變動，只是動態加載了不同的組件而已。那麼當你編輯完成後，又想回到列表頁，此時的列表頁還是會停留在沒有編輯前的狀態。
  • 期望效果：從列表頁—>點擊編輯—>進入編輯頁（路由未改變）—>編輯完成—>刷新路由—>回到列表頁—>展示編輯後的最新狀態

解決辦法

• 方法一：暴力解決-強制整個頁面進行刷新
  • 1.使用this.$router.go(0)函數，可以強制刷新當前頁面
  • 2.使用window.location.href或者window.location.reload()，強制刷新當前頁面
  • 注： 問題：以上兩種處理都會是當前頁面進行刷新，瀏覽器進行重新加載，出現頁面閃爍和空白，極大的降低了用戶體驗。
• 方法二：優雅解決-藉助vue的選項/組合 provide/inject （完美方案）
  • 在app.vue中：

<template>
  <div id="app">
    <router-view v-if="isShow" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 控制router-view的隱藏與顯示
      isShow: true
    }
  },
  provide() { // 提供可注入子組件屬性
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() { // 定義加載方式
      // 先取消當前路由的視圖展示，待dom重新渲染完畢，再讓當前路由視圖展示
      this.isShow = false 
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  }
}
</script>

• 在要刷新路由的子孫組件中----使用inject進行接收注入的依賴

export default {
  name: 'EditApp',
  inject: ['reload'], // 接收注入的數據（負責刷新路由）
}

• 在要刷新路由的子孫組件中----編輯成功後，刷新當前路由

editAPP(JSON.stringify({
	 'app_content': '編輯的內容',
	 'app_title': '編輯的標題',
	 'id': 1
})).then(response => {
   	if (response.errcode === 1) {
     this.reload() // 刷新當前路由
   }
})

注： provide/inject這對選項要組合使用，以允許一個祖先組件向其所有的子孫後代組件注入依賴，不論層次有多深，這樣在所有子孫後代裏，均可方便實現刷新路由功能。

到此，一個完美的刷新路由的方案就展示完畢啦~
歡迎小夥伴們留言交流，並提出你們的寶貴建議噢~