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 を再マウントせずにルートを変更してパラメーターを取得する方法はありますか?
P粉5508235772023-11-06 00:41:58
レンダリングされたコンポーネントをキャッシュするには、レイアウト内の <Nuxt>
コンポーネントで keep-alive
を使用します:
特定のページのみをキャッシュするには、keep-alive-props.include
とコンポーネント名 (つまり、ページへのパス) を使用します。
リーリー
P粉5187995572023-11-06 00:13:47
デフォルトのレイアウト ファイルで <Nuxt keep-alive />
を使用しています。Vue 開発者ツールを見ると、Nuxt がそれぞれに一意のキーを持つ ## を作成していることに気付きました。章とセクション。 #pages/index.vue の新しいインスタンス :
<Nuxt nuxt-child-key="doNotReMount"/> を使用して、固定キーをページに強制的に割り当てるというアイデアが生まれました。
pages/index.vue ページは 1 回だけマウントされ、後続のすべてのルートは同じページ インスタンスを使用します。