Nuxt3 の落とし穴 - キープアライブの使用

Nuxt3 は頻繁に変更されるため、他の人が書いた多くの記事が無効になります。。。この記事は2023年7月7日に書かれたもので、nuxtのバージョンは3.0.0です。

簡単な方法:

特定のページをキープアライブさせたい場合は、このコードをそのページに追加するだけです。

たとえば、/search を KeepAlive にしたい場合は、このコードを /pages/search.vue に追加します。

<script lang="ts" setup>
definePageMeta({
    keepalive: true//设置为keepAlive
})
</script>

キープアライブを使用するページで、コンポーネントが表示/閉じられるたびに動作するようにしたい場合は、(onMounted と onUnmounted の代わりに) onActivated と onDeactivated を使用する必要があることに注意してください。

公式ウェブサイトのドキュメント:ページ/ · Nuxt ディレクトリ構造

他の書き方: