ページを更新せずにNuxt.jsルーターのルーティングパラメータを変更するにはどうすればよいですか?

Question

Nuxt.js (バージョン 2.15.7) を使用する単一ページ アプリケーションがあり、URL から 2 つのパラメーターを取得する必要があります。例えば：＃＃＃ リーリー

3 つのアドレスはすべて、

pages/index.vue にある同じページをレンダリングする必要があります。$route.params.chapterNo と $ を読み取れるようにしたいだけです。実際に別のページにリダイレクトせずに、route.params.sectionNo を実行します。

nuxt.config.js ファイルを次のように編集することで、部分的にこれを実現しました: リーリー

唯一の問題は、これによって

pages/index.vue の以前のバージョンが破壊され、新しい章またはセクションにルーティングされるたびに新しいバージョンが再マウントされることです。 mounted() はルートが変更されるたびに呼び出されますが、ページをマウントする必要があるのは 1 回だけです。アドレス変更時にアニメーション化されますが、この設定では DOM 全体がクリアされて再構築されるため、アニメーション化できなくなります。ページ全体を再レンダリングせずにこれら 2 つのパラメータのみを取得するルーティング設定はありますか?

構成ファイルの

component 属性を削除しようとしましたが、 ページが見つかりません エラーが発生しました。

試行 1:

ルート

<Nuxt> コンポーネントで keep-alive を使用しようとしましたが、これでは各ページがキャッシュされるだけです。ルートが変更されるたびに再マウントされます。

試行 2:

複数パラメータの定義オプションを指定して

router-extras モジュールを使用してみましたが、ルートが変更されるたびに pages/index.vue も再マウントされます。これが私の試みですが、同じ問題が発生しました: リーリー

pages.index.vue を再マウントせずにルートを変更してパラメーターを取得する方法はありますか?

Answer 1

レンダリングされたコンポーネントをキャッシュするには、レイアウト内の <Nuxt> コンポーネントで keep-alive を使用します:

リーリー

デモ 1

特定のページのみをキャッシュするには、keep-alive-props.include とコンポーネント名 (つまり、ページへのパス) を使用します。 リーリー

デモ 2

Answer 2

デフォルトのレイアウト ファイルで <Nuxt keep-alive /> を使用しています。Vue 開発者ツールを見ると、Nuxt がそれぞれに一意のキーを持つ ## を作成していることに気付きました。章とセクション。 #pages/index.vue の新しいインスタンス :

これにより、

<Nuxt nuxt-child-key="doNotReMount"/> を使用して、固定キーをページに強制的に割り当てるというアイデアが生まれました。

これで、新しいルートごとにキーは更新されなくなります。

pages/index.vue ページは 1 回だけマウントされ、後続のすべてのルートは同じページ インスタンスを使用します。