Detailed description of vue-router Component Reuse and vue-router Reuse

Detailed description of vue-router Component Reuse and vue-router Reuse

A component system is an important component of Vue. It can abstract a complex page into many small, independent and reusable components and combine them to form applications, in combination with the routing function of vue-router, each component is mapped to the corresponding route, and the route changes are used to tell the Vue where to render them, navigation between components and pages.

Problem

When vue-router is used to switch a route, the update of the component tree is triggered. A new component tree is rendered based on the defined route. The general switching process is as follows:

1. Stop and remove unnecessary Components
2. Verify the feasibility of switchover
3. Reuse components not updated
4. Enable and activate new components

For details about the route switching control process, refer to the official documentation: Switching Control Pipeline

How does vue-router determine that a component can be reused? Let's take a look at the routing configuration below the ingress:

{  path: 'post/:postId',  name: 'post',  component: resolve => require(['./components/Post.vue'],resolve)}

This is the route for loading the corresponding article page through the Article ID. The first visit, Post. the vue component is rendered to the component tree. When the mounted component is installed, the article content is displayed on the page by the Article ID. When we access another article, the routing parameters are as follows: the postId is changed and the content of the new article should be displayed as expected, but this is counterproductive.

We can see the previous article. Although the route parameters have been changed, the vue-router will assume that you are accessing Post. vue is a component that has previously been rendered. Therefore, the previous component is reused without executing any operations in the component, including life cycle functions such as mounted.

So what we finally see is the content of the original component.

How can we achieve the expected results? The following describes an effective solution.

Solution

We can use the watch listener to listen for route changes and respond to corresponding data based on Route parameter changes. The specific implementation process is as follows:

Define data acquisition methods

First, define a method to get the article, and obtain the corresponding article information from the background based on the Article ID.

methods: {  getPost(postId) {    this.$http.get(`/post/get_post/${postId}`).then((response) => {      if(response.data.code === 0){        this.post = response.data.post;      }    });  }}

Listener route

The next step is to determine whether the target component is Post during route switching. vue component, which can be implemented according to the defined route name. If yes, we can obtain the target Article ID from the route information to update the component content.

watch: {  '$route' (to, from) {    if(to.name === 'post'){      this.getPost(to.params.postId);    }  }}

Component Initialization

Note that when the component is first mounted to the component tree, the routing listening is invalid. In this case, we need to initialize the component by using the lifecycle hook mounted:

mounted() {  this.getPost(this.$route.params.postId);}

Conclusion

Through the above method, the component content can be updated as the Routing Parameters Change, effectively solving the problem of invalid Routing Parameters caused by the reuse of the vue-router component.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.