What are the reuse issues related to vue-router components?

This article mainly introduces the detailed explanation of vue-router component reuse issues. Now I share it with you and give it as a reference.

The component system is an important part of Vue. It can decompose a complex page abstraction into many small, independent, and reusable components. Applications can be composed by combining components, combined with vue-router's The routing function maps each component to the corresponding route, tells Vue where to render them through changes in the route, and realizes jump navigation between each component and each page.

Question

When using vue-router to switch routes, it will trigger the update of the component tree and render a new component tree based on the defined route. The general switching process is as follows of:

1. Deactivate and remove unnecessary components

2. Verify 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: Switching Control pipeline

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/Post.vue'],resolve)
}

This is the route that loads the corresponding article page through the article ID. When accessed for the first time, the Post.vue component will be rendered into the component tree, and the mounted component will be installed. When we get the article content through the article ID and display it on the page, when we access another article, the routing parameter: postId changes. According to our expectations, the content of the new article should be displayed, but it backfires.

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

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

So how can we achieve the desired effect? An effective solution is introduced below

Solution

We can use the watch listener to monitor routing changes and respond accordingly based on 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 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;
      }
    });
  }
}

Listen to the route

The next step is to determine whether the target component is a Post.vue component when the route is switched. This can be implemented based on the defined route name name. If it is , we can obtain the target article ID from the routing information to update the component content.

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

Component initialization

It should be noted here that when the component is mounted to the component tree for the first time, the monitoring of routing is invalid. At this time we The component needs to be initialized in the life cycle hook mounted:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to calculate the polygon centroid in JavaScript

How to use the switch selector in the WeChat applet

Detailed interpretation of Angular’s ​​error 404 issues

How to use the slider component in the WeChat applet

How to remember the password to the cookie in vue

Important version update of AngularJS

How to use the progress component in the WeChat applet

The above is the detailed content of What are the reuse issues related to vue-router components?. For more information, please follow other related articles on the PHP Chinese website!