How can I re initialize same components in different routes

Question

Scenario:

I have a multi-step form, if the user clicks on the next button, the only thing that changes in the route is the id e.g. form /step/:id, but whenever I have steps/routes that contains the same components as the previous one, it only calls the 'created' method of the components of the first, it doesn't call on the next one.

Is there a way to re-create/initialise the components every time i change routes?

Answer 1

You can have a look at "Reacting to Params Changes" section in docs

One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.

To react to params changes in the same component, you can simply watch the $route object:

  watch: {
    '$route' (to, from) {
      //update the variables with new route params
    }
  },

You can also have a look at my similar answer here.

Answer 2

I have one more issue encountered. Whenever my route params changed, the props that I passed to that component doesn't get updated.

On the first load, the prop value gets updated, but when I go to the next step/route, the $route gets updated and also the method inside the watch gets executed, but the value of the prop that is passed is the same as the value of the first step/route. Then, when I go to the next step/route again, the value of the component of the third step/route is supposedly the value of the component of the second step/route. Seems like the value of the props are 1 step behind the actual route.

Here is how I passed the prop:

<el-repeater :element.sync="element"></el-repeater>

Edit: But all of the data that can be seen in the UI are updated and correct, and those data are based on the prop that has been passed.