Vue-router: Routing the same component, the component is not reload, but be reused?

[baijunjie]

Version

2.5.3

Reproduction link

http://jsfiddle.net/L7hscd8h/1526/

Steps to reproduce

Please look at the demo

What is expected?

Reinitializes the components, the implementation of the component complete life cycle

What is actually happening?

The second route to components, components do not reload, lead to the previous page of the data has not been cleared

[LinusBorg]

This is expected behaviour, Vue re-uses components where possible.

You can use the beforeRouteUpdatehook to react to a route switch that uses the same component.

[baijunjie]

Yes, although I also hope that the component be reused, but I more hope that data can be initialized again, otherwise the component does not make sense to me, as if it couldn't be continuous reuse.

[baijunjie]

I can only manual initialization data in beforeRouteUpdate? Seems it doesn't solve my problem.

I have to make the jump to a empty page, and then jump back, force the router to reload the components.

Is there a parameter can force it not be reused, but let it reload?

[baijunjie]

If it is the same path, and the same parameters, then reuse: no problem.

If it is the same path, but different parameters, then reuse is meaningless.

As a developer, really want is code reuse components, instead of reusing component data!

Change in the parameters, means that the component data needs to be initialized again!

[LinusBorg]

Here is a new version of your fiddle, using beforeRouteUpdate to re-initialize the data.

https://jsfiddle.net/Linusborg/L7hscd8h/1527/

Another possible way is to use a keyon the router-view to force the component to be re-created:

https://jsfiddle.net/Linusborg/L7hscd8h/1528/

[baijunjie]

Thank you, : key can solve my problem.
Why in the document have not mentioned?

[titpetric]

@LinusBorg is it somehow possible for the component not to be recreated, but catch every route update? Even in your example, beforeRouteUpdate is called only once, on the first visit versus the desired outcome - being called on any route/path/parameter change.

[LinusBorg]

My code example was buggy, didn't call next:

https://jsfiddle.net/Linusborg/L7hscd8h/2208/

You could also use the props feature to use props instead of access ing the $route and beforeUpdate:

https://router.vuejs.org/en/essentials/passing-props.html

Please use forum.vuejs.org for further questions, not closed issues. Thanks :)