ルートにアクセスする前にルートデータをプリロードする最良の方法。

Question

特定のルートのページをレンダリングする前に、まず必要なデータを同期的に取得したいと考えています。理想的にはページコンポーネントでデータを取得したいのですが、ルーターファイルでそれを行うことに反対しません。私はさまざまなアプローチを読んだり試したりしてきましたが、課題の一部は、コンポーネントを構築する方法が複数あり、特定の機能の使用方法が異なるという事実から来ています。

私の場合は、Composition API と を使用します。

P粉546257913 · Answer

まず第一に、beforeRouteUpdate は実際のルートが更新されたときにのみトリガーされますが、公式のがここでに伝えるように、別のコンポーネント/ページには移動しません。

ライフサイクルフックをトリガーする可能性のあるものの例は次のとおりです。リーリー

onBeforeRouteLeave あるページから別のページに移動するときは、ご想像のとおり、完璧に機能します。

元の質問では、

Nuxt がするような、何らかの種類のルーターミドルウェアを実装できます。このようにして、 HTTP 呼び出しを待機し、 その後初めて 実際のナビゲーションを許可します。したがって、ブロックナビゲーション効果を作成することはほぼ可能です。 Comboposition API を使用してこれを記述する方法はわかりませんが、Options API で完全に動作することはわかっています (利用可能なブログ投稿がたくさんあります)。

setup

自体は独自のライフサイクル方法で実行され、多くのことがかなりトリッキーだと思います。 TLDR: 私の意見では、優れたルーターミドルウェアページラッパー (レイアウトなど) があなたの場合には完璧な組み合わせです。そこでは、同時にかなりの数のページに対してオブザーバーを設定できます。

しかし、すべては自分自身をどのように整理し、コードを構造化したいかによって決まります。

スケルトン画面はブロックするよりも速い印象を与えますが、一般に、

prefetch

(これもデフォルトで Nuxt に同梱されています) を使用してヒントを取得することもできます。場合によっては、それらをロードする前に特定のリソースが必要です。 (ネットワークリクエストを高速化するための同じドメイン内の他のトリック)

P粉545956597 · Answer

解決策があります - トップレベルの await を使用します - 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( Don'不要なコンポーネントは使用しないでください)

唯一注意すべき点は、最初のリクエストで「読み込み画面」が表示されることです。

小さなデモを作成しましたので、試してみてください - https://github.com/ileue/vue-top-level-await-demo

ルートにアクセスする前にルート データをプリロードする最良の方法。

全員に返信(2)返信します

ルートにアクセスする前にルートデータをプリロードする最良の方法。