Nuxt.js: Reuse component for different route re-creates the component

[amritk]

Version

v2.6.3

Reproduction link

https://codesandbox.io/embed/j2m9k3568w?fontsize=14

Steps to reproduce

Look at the console while clicking on the about and afout links. They use the same component so Vue would normally cache it re-use the same component. Then you would have to set a key on the router-view to actually get it to re-create the component. Now the behaviour of nuxt seems to be doing this by default, but what if you didn't want the component to get re-created?

Here is an example:
https://stackoverflow.com/questions/42603583/vue-js-same-component-with-different-routes

What is expected ?

You expect the component to NOT be re-created.

What is actually happening?

You can see in the console that the component is getting re-created as if there was a key on the router-view

Additional comments?

Not sure if this is on purpose? If so how do you enable the default vue behaviour?

_{This bug report is available on Nuxt community (#c9202)}

[nicodevs]

You can use the key property on your page to avoid this behavior.

Check this comment.

[amritk]

@nicodevs that does solve it, but it goes against how vue-router works. It should definitely be documented somewhere.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[xerosanyam]

You can use the key property on your page to avoid this behavior.

Check this comment.

Thank you very much for the answer!

[amritk]

Hey @xerosanyam do you know how key works with child pages? I could not get it to work:

https://codesandbox.io/s/withered-darkness-9ezn9

[xerosanyam]

@amritk what do you mean by child pages?

I am also facing 1 problem, the props of child components are not getting updated. Anybody knows a solution to that?

[amritk]

@xerosanyam by child page I meant usint nuxt-child as you can see in my codesandbox