Detailed explanation of vue-router component reuse problem

The component system is an important part of Vue. It can abstractly decompose a complex page into many small, independent, and reusable components, and combine components to form an application, combine the routing function of vue-router to map each component to the corresponding route, and tell Vue where to render them through route changes, so as to realize jump navigation between each component and each page.

question

When switching routes using vue-router, the update of the component tree will be triggered. A new component tree is rendered according to the defined route. The rough switching process is as follows:

1. Deactivate and remove unwanted components
2. Verify the feasibility of switching
3. Reuse components that have not been updated
4. Enable and activate new components

For specific routing switching control process, please refer to the official document:Switch control pipeline

So how does vue-router determine that a certain component can be reused? Let's take a look at the following routing configuration:

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

This is the route that loads the corresponding article page through the article ID. When accessing the first time, this component will be rendered into the component tree. When mounted installed the component, the article content is obtained through the article ID and displayed on the page. When we access another article, the routing parameter: postId changes. The content of the new article should be displayed as we expect, but it goes against our expectations.

What we see is the previous article. Although the routing parameters have changed, vue-router will think that you are accessing this component. Since the component has been rendered before, the previous component will be reused directly and will not perform any operations in the component, including lifecycle functions such as mounted.

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

So how can we achieve the desired effect? Here is an effective solution

Solution

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

Define the data acquisition method

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

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

Listen to routes

Next, we can determine whether the target component is a component during routing switching. Here we can implement it according to the defined route name name. If so, we can obtain the target article ID from the routing information to update the component content.

watch: {
  '$route' (to, from) {
    if( === 'post'){
      ();
    }
  }
}

Component initialization

It should be noted here that when a component is mounted to the component tree for the first time, the listening to the route is invalid. At this time, we need to initialize the component in the life cycle hook mounted:

mounted() {
  (this.$);
}

Written at the end

Through the above method, the component content can be updated with the changes in routing parameters, effectively solving the problem of routing parameters failure caused by vue-router component multiplexing.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.