The following test version is nuxt2.17.1
This is because nuxt sets the key of <router-view> in vue-router by default and sets route.fullPath. As a result, after switching router , asyncData / fetch will be re-executed on the client side and the component will be re-mounted (executed created life cycle).
If you set the same key to keep it alive , it will not be remounted , but asyncData /fetch will be executed again from the server side for ssr rendering , and then the life cycle hook will be executed on the client side (that is, the browser will be refreshed).
There are three ways to handle the keys of <router-view /> internal attributes in nuxt:
1.nuxt’s nuxtChildKey
<nuxt :nuxt-child-key="someKey" />
ps:<nuxt> needs to be used in layout.
The application's default layout can be extended by adding the layouts/default.vue file. The source code of the default layout is as follows:
<template> <nuxt /> </template>
2. Key option in page component: string or function
export default {
key(route) {
return route.fullPath
}
}
3. watchQuery option in page component: boolean or string []
The query specified in the watchQuery option will be used to build the key. If watchQuery is true, fullPath is used by default
export default {
watchQuery: ['page']
}