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 属性を削除しようとしましたが、 ページが見つかりません エラーが発生しました。
<Nuxt> コンポーネントで keep-alive を使用しようとしましたが、これでは各ページがキャッシュされるだけです。ルートが変更されるたびに再マウントされます。
router-extras モジュールを使用してみましたが、ルートが変更されるたびに pages/index.vue も再マウントされます。これが私の試みですが、同じ問題が発生しました:
リーリー
pages.index.vue を再マウントせずにルートを変更してパラメーターを取得する方法はありますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
レンダリングされたコンポーネントをキャッシュするには、レイアウト内の
リーリー<Nuxt>コンポーネントでkeep-aliveを使用します:デモ 1
特定のページのみをキャッシュするには、
keep-alive-props.includeとコンポーネント名 (つまり、ページへのパス) を使用します。 リーリーデモ 2
デフォルトのレイアウト ファイルで
これにより、<Nuxt keep-alive />を使用しています。Vue 開発者ツールを見ると、Nuxt がそれぞれに一意のキーを持つ ## を作成していることに気付きました。章とセクション。 #pages/index.vue の新しいインスタンス:<Nuxt nuxt-child-key="doNotReMount"/>
これで、新しいルートごとにキーは更新されなくなります。を使用して、固定キーをページに強制的に割り当てるというアイデアが生まれました。pages/index.vue
ページは 1 回だけマウントされ、後続のすべてのルートは同じページ インスタンスを使用します。