[Vuejs]-Loading content fails while switching routes in Vue.js 2. Why?

by

0👍

Route components in Vue Router 2 are always reused whenever possible. This means the Difficulty component is not re-created when you navigate to a different difficulty, and it performs initialization in the created hook which will not be called when the route changes.

You need to use the beforeRouteUpdate navigation guard to re-initialize the component with the new difficulty (and possible reset the state of the component if required).

methods: {
  reset() {
    this.generateColorsArray();
    this.gameData.score = this.score;
    this.gameData.tries = this.tries;
    this.gameData.colors = this.colorItems;
    console.log(this.gameData)
  },
},

created() {
  this.reset();
},

beforeRouteUpdate(to, from, next) {
  // This check may not be necessary depending on your router configuration
  // and if you have other intermediate route components
  if (from.params.id !== to.params.id) {
    this.reset();
  }

  next();
},

Leave a comment