How to use the keep-alive component to achieve no refresh effect in a vue project

How to use the keep-alive component in a vue project to achieve a refresh-free effect

In a Vue project, we often encounter the need to switch pages but maintain the page status. At this time, we can use Vue's keep-alive component to achieve a refresh-free effect. The keep-alive component is an abstract component provided by Vue, which is used to cache component instances to avoid repeated rendering.

Next, I will use a simple example to introduce how to use keep-alive to achieve a refresh-free effect.

First, we need to create a Vue project and create two pages in the project, namely Home and About.

In the Home page, we display a counter with an initial value of 0. Each time the button is clicked, the counter value will increase by 1.

<template>
  <div>
    <h2>Home页面</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

In the About page, we display the value of a counter and provide a return button to return to the Home page.

<template>
  <div>
    <h2>About页面</h2>
    <p>计数器的值: {{ count }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

Next, we need to add keep-alive components to the Home and About pages in the routing configuration.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      meta: {
        keepAlive: true // 设置keep-alive为true
      }
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue'),
      meta: {
        keepAlive: false // 设置keep-alive为false
      }
    }
  ]
});

Here, we set the keep-alive of the Home page to true, which turns on the cache, and the keep-alive of the About page is set to false, which turns off the cache.

Finally, we need to add the keep-alive component to the App.vue component and dynamically turn on or off the cache according to the route's keep-alive configuration.

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

Through the above configuration, we can now click the "Increase" button on the Home page, the counter value will increase, and then jump to the About page, and then return to the Home page, the counter value will remain unchanged. .

Summary:

Through the above examples, we can see that the refresh-free effect can be easily achieved by using the keep-alive component. By configuring the meta attribute of the route, we can flexibly control the caching strategy of the component. Keep-alive components are a good choice when we need to maintain the state of the page or prevent repeated renderings.

I hope the examples in this article can help you better understand how to use the keep-alive component to achieve a refresh-free effect in a Vue project. If you have any questions, please leave a message for discussion.

The above is the detailed content of How to use the keep-alive component to achieve no refresh effect in a vue project. For more information, please follow other related articles on the PHP Chinese website!