在存取路線之前預先載入路線資料的最佳方法。

Question

在為給定路由渲染頁面之前，我想先同步取得必要的資料。理想情況下，我希望在頁面組件中獲取數據，但我不反對在路由器文件中執行此操作。我已經閱讀並嘗試了各種方法，但部分挑戰來自於這樣一個事實：構建組件的方法也有多種，並且某些功能的使用也各不相同。

就我而言，我使用 Composition API 和

Answer 1

首先，beforeRouteUpdate僅在更新實際路由時觸發，但不會像官方那樣轉到另一個元件/頁面這裡告訴。

關於什麼可能觸發生命週期掛鉤的範例是

<button @click="$router.push({ hash: `#${Math.floor(Math.random() * 10)}` })">
  random hash
</button>

onBeforeRouteLeave 完美地工作，正如你所期望的那樣，從一個頁面移動到另一個頁面時。

對於最初的問題，您可以實作某種路由器中間件 就像 Nuxt 做到了。這樣，您就可以等待 HTTP 調用，而只有在那時才允許實際導航。因此幾乎可以創建塊導航效果。

我不確定如何使用 Composition API 編寫它，但我知道它可以與 Options API 完美配合（有很多可用的部落格文章）。 setup 本身以它自己的生命週期方式運行，我想很多事情都相當棘手。

TLDR：在我看來，一個好的路由器中間件 頁麵包裝器（如佈局）是您案例中的完美組合。在那裡，您可以同時為相當多的頁面設定觀察者。

但是一切都取決於您想要如何組織自己並建立程式碼。

---

骨架螢幕給人一種比阻塞更快的感覺，但總的來說，您也可以使用prefetch< /a> （預設情況下也隨Nuxt 一起提供）以獲得一些提示並可能在需要某些資源之前加載它們。 （ 同一網域中的其他技巧來加速您的網路請求）

Answer 2

有一個解決方案 - 使用頂級等待 - https ://vuejs.org/api/sfc-script-setup.html#top-level-await

#只需將RouterView 組件包裝在Suspense 組件中，如下所示- https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components（不要使用不需要的元件）

唯一需要注意的是，「載入畫面」將在初始請求時可見。

我為您做了一個小演示，以便您可以嘗試 - https ://github.com/ileue/vue-top-level-await-demo