Nuxt3 pitfalls - using keep-alive

Nuxt3 changes so frequently that many articles written by others are no longer valid. . . This article was written on July 7, 2023, and the nuxt version is 3.0.0.

Simple way:

Now if you want to make a certain page keep-alive, you only need to add this code to that page .

For example, if I want /search to be KeepAlive, then add this code to /pages/search.vue

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

Note that for pages that use keep-alive, if you want your component to operate every time it is displayed/closed, you need to use onActivated and onDeactivated (instead of onMounted and onUnmounted)

Official website document: pages/ · Nuxt Directory Structure

Other ways of writing: