How to realize component reuse of different routes by vue

This article mainly shows you "vue how to achieve component reuse of different routes", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "vue how to achieve component reuse of different routes" this article.

Component reuse of different routes

1 scene restore

When vue-router is from / post-page/an in a scene, jump to / post-page/b. Then we were surprised to find that the data was not updated after the page jumped. The reason is that vue-router "intelligently" discovers that this is the same component, and then it decides to reuse the component, so the method you wrote in the created function is not executed at all. The usual solution is to listen for changes in $route to initialize the data, as follows:

Data () {return {loading: false, error: null, post: null}}, watch: {'$route': {/ / use watch to monitor whether it is the same route handler: 'resetData', immediate: true}}, methods: {resetData () {this.loading = false this.error = null this.post = null this.getPost (this.$route.params.id)}, getPost (id) {}}

2 optimization

So how can we achieve this effect? the answer is to add a different key to router-view, so that even if it is a common component, as soon as the url changes, it will be recreated.

You can also add a + + new Date () timestamp after it to ensure uniqueness.

These are all the contents of the article "how to reuse components of different routes in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!