Nuxt.js: Dynamic page recreated on param change

Created on 31 Dec 2018 · 5Comments · Source: nuxt/nuxt.js

Version

v2.3.4

Reproduction link

Steps to reproduce

Go to /foo/1
Open console
Click Bar 2 link (The link only changes the bar param -> see URL)
Notice in the console that the page is recreated

Reproduction repo: https://github.com/christopheschwyzer/nuxt-dynamic-routes-bug
Deployed also here: https://condescending-bhabha-c04b2c.netlify.com/foo/1

What is expected ?

I understand from the vue-router documentation that the component shouldn't be recreated in such case?

Note: If the destination is the same as the current route and only params are changing (e.g. going from one profile to another /users/1 -> /users/2), you will have to use beforeRouteUpdate to react to changes (e.g. fetching the user information).

What is actually happening?

Page is recreated.

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

bug-report stale

Source

christopheschwyzer

Most helpful comment

Hi @christopheschwyzer , the issue is because the key of RouterView is different between /foo/1 and /foo/2, for now you can specify key to ensure view is same one:

<script>
export default {
  key: '_bar',
  created() {
    console.log("created");
  }
};
</script>

clarkdo on 2 Jan 2019

👍8 🎉2 😄2 🚀1 ❤1

All 5 comments

Hi @christopheschwyzer , the issue is because the key of RouterView is different between /foo/1 and /foo/2, for now you can specify key to ensure view is same one:

<script>
export default {
  key: '_bar',
  created() {
    console.log("created");
  }
};
</script>

clarkdo on 2 Jan 2019

👍8 🎉2 😄2 🚀1 ❤1

@clarkdo Thank you, works great!

As I'm not sure what the (default) behavior should be I'll keep the issue open - but feel free to close it.

christopheschwyzer on 2 Jan 2019

👍1

Well, either it has to be well documented or changed ☺️

I think such behavior is needed for transitions but I could be wrong.

cc @pi0 (is that behavior intended or even required?)

manniL on 4 Jan 2019

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:

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

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

stale[bot] on 25 Jan 2019

Hey there 👋

Indeed, the key is made for the transitions to work seamlessly by default. This behaviour will be better documented in the future, thank you for reporting it @christopheschwyzer

@clarkdo's comment should solve your issue if you don't want any re-creation of the view :)