nuxt / examples

Deployed Nuxt examples
https://nuxt.com/docs/examples
MIT License
164 stars 40 forks source link

Difference between static and reload (in Routing/Pages)? #74

Closed elbowz closed 7 months ago

elbowz commented 7 months ago

In the routing/pages example, what should be the difference between the parent/reload-[id] and parent/static-[id] pages?

In the parent/static-[id] page code are added these lines:

definePageMeta({
  key: 'static'
})

Perhaps this should prevent the re-rendering, as described in Child Route Keys? Does this reflect a different behavior on the incremented var inside onMounted()?

Thanks in advance!

p.s. I'm still learning Nuxt/Vue, and I don't know if this is a bug, or if I just don't understand the meaning behind it.

arashsheyda commented 7 months ago

@elbowz the parent/static-[id] page has key(static, it can be anything). if the key doesn't change the page wouldn't re render. (you can find some more info about page key here)

if you click on the keyed-child, each time that the route changes, the child reloaded value increases (because it has a dynamic page key), but if you click on the non-keyed child, each time that the route changes, the value doesn't change(becuase it has a static page key), it only changes if you navigate from another route.

https://github.com/nuxt/examples/assets/38922203/f12fa7d6-e887-4f8f-8ab1-26f282a21ba1

let me know if this was clear for you, and feel free to ask more questions! thanks

elbowz commented 7 months ago

but if you click on the non-keyed child, each time that the route changes, the value doesn't change(becuase it has a static page key), it only changes if you navigate from another route.

I have missed this part, I always clicked away and coming back to the non-keyed child page, and I saw that the reloads value increasing. I thought this was also coming back from other routes that avoided re-rendering (with some internal caching). Now I understand this too, as it is useful for transitions.

let me know if this was clear for you, and feel free to ask more questions! thanks

Thank you so much! Really available and kind :)