特定のルートのページをレンダリングする前に、まず必要なデータを同期的に取得したいと考えています。理想的にはページコンポーネントでデータを取得したいのですが、ルーターファイルでそれを行うことに反対しません。私はさまざまなアプローチを読んだり試したりしてきましたが、課題の一部は、コンポーネントを構築する方法が複数あり、特定の機能の使用方法が異なるという事実から来ています。
私の場合は、Composition API と を使用します。
を使用します。
まず第一に、beforeRouteUpdate は実際のルートが更新されたときにのみトリガーされますが、公式の がここで に伝えるように、別のコンポーネント/ページには移動しません。
beforeRouteUpdate
ライフサイクル フックをトリガーする可能性のあるものの例は次のとおりです。 リーリー
onBeforeRouteLeave あるページから別のページに移動するときは、ご想像のとおり、完璧に機能します。
Nuxt が するような、何らかの種類の ルーター ミドルウェア を実装できます。このようにして、 HTTP 呼び出しを待機し、 その後初めて 実際のナビゲーションを許可します。したがって、ブロック ナビゲーション効果を作成することはほぼ可能です。 Comboposition API を使用してこれを記述する方法はわかりませんが、Options API で完全に動作することはわかっています (利用可能なブログ投稿がたくさんあります)。
その後初めて
自体は独自のライフサイクル方法で実行され、多くのことがかなりトリッキーだと思います。 TLDR: 私の意見では、優れたルーター ミドルウェア ページ ラッパー (レイアウトなど) があなたの場合には完璧な組み合わせです。そこでは、同時にかなりの数のページに対してオブザーバーを設定できます。
しかし、すべては自分自身をどのように整理し、コードを構造化したいかによって決まります。
(これもデフォルトで Nuxt に同梱されています) を使用してヒントを取得することもできます。場合によっては、それらをロードする前に特定のリソースが必要です。 (ネットワークリクエストを高速化するための同じドメイン内の他のトリック)
解決策があります - トップレベルの 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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
まず第一に、
beforeRouteUpdateは実際のルートが更新されたときにのみトリガーされますが、公式の がここで に伝えるように、別のコンポーネント/ページには移動しません。ライフサイクル フックをトリガーする可能性のあるものの例は次のとおりです。 リーリー
onBeforeRouteLeave
元の質問では、あるページから別のページに移動するときは、ご想像のとおり、完璧に機能します。Nuxt が するような、何らかの種類の ルーター ミドルウェア を実装できます。このようにして、 HTTP 呼び出しを待機し、
setupその後初めて実際のナビゲーションを許可します。したがって、ブロック ナビゲーション効果を作成することはほぼ可能です。 Comboposition API を使用してこれを記述する方法はわかりませんが、Options API で完全に動作することはわかっています (利用可能なブログ投稿がたくさんあります)。自体は独自のライフサイクル方法で実行され、多くのことがかなりトリッキーだと思います。
しかし、すべては自分自身をどのように整理し、コードを構造化したいかによって決まります。
スケルトン画面はブロックするよりも速い印象を与えますが、一般に、prefetch
(これもデフォルトで Nuxt に同梱されています) を使用してヒントを取得することもできます。場合によっては、それらをロードする前に特定のリソースが必要です。 (ネットワークリクエストを高速化するための同じドメイン内の他のトリック)
解決策があります - トップレベルの 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