在Vue項目中，刷新當前頁除了 window.reload()，你還能想到什么辦法？而且這種辦法會重新加載資源出現短暫的空白頁面。體驗不是很好。

在某個詳情頁面的時候，我們經常需要通過路由中的詳情 id 去獲取內容，當我們在不同的詳情頁來回切換的時候，打開的頁面是同一個，只是需要通過監聽路由中的參數 id 的變化去重新請求詳情接口。

如果這個詳情頁只需要一個接口還好，只需要通過 watch 去監聽，里面做數據請求就好。

watch: {$route: {immediate: true,handler(to, from) {if (to.name === 'Detail') {let id = to.params.id// ...}}}}

那一旦這個頁面有很多的接口，數據邏輯依賴很復雜的時候，這個時候再寫一推的監聽就很容易出現屎山代碼。而且不好維護。

此時我們最希望的是進入每個詳情頁都刷新頁面，也就是重新加載一遍組件。怎么去維護好一個全局刷新頁面的方法去更新路由組件？

我們可以通過在 App.vue 里定義一個 reload 方法，通過provide 和 inject 來拋出和注入到其它頁面使用。

而最終的重擔落在這個 reload 方法身上，其實也簡單，這個方法主要的做的事是控制一個變量的值來控制整個頁面的路由組件移除和顯示。

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

然后在其它頁面注入該方法直接調用即可

export default {inject: ['reload'],data() {return {}},methods: {refresh() {this.reload()}}

實際項目中經常有各種曲線救國的思路可以幫我們解決很多問題。遇到問題一定要發散下思維，這個時候搞懂原理，再結合各種特性才能想到解決辦法。

實踐告訴我們文檔中的方法很正，但是并不能解決所有的問題。往往需要根據文檔中的多個特性相結合找到思路。

總結

以上是生活随笔為你收集整理的Vue刷新页面有哪几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。