How to use keep-alive to optimize route switching effect in vue project

How to use keep-alive to optimize the routing switching effect in the vue project

In the vue project, routing switching is a common operation. However, when we switch routes frequently, we will find that components and data are reloaded every time we switch, resulting in slow page loading and poor user experience. In order to solve this problem, we can use vue's keep-alive component to optimize the routing switching effect.

keep-alive is an abstract component provided by vue, which can be wrapped outside the component that needs to be cached to cache the state of the component to avoid repeated rendering of the component. When switching routes, you can dynamically control whether to enable caching by setting the meta attribute of the route. Next, let's take a look at how to use keep-alive to optimize the routing switching effect in the vue project.

1. First, add the meta attribute in the routing configuration file

In each routing object in the routing configuration file (usually router.js), add a meta Property and set its value to true or false to control whether caching is enabled. For example:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      keepAlive: true
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      keepAlive: false
    }
  }
]

2. Use the keep-alive component in App.vue

Outside the tag in App.vue, add tag, and set the include attribute to the name of the component that needs to be cached. For example:

<template>
  <div id="app">
    <keep-alive :include="keepAliveComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  computed: {
    keepAliveComponents() {
      // 获取带有meta.keepAlive属性的组件名
      const routes = this.$router.options.routes;
      const keepAliveComponents = routes
        .filter(route => route.meta && route.meta.keepAlive)
        .map(route => route.name);
      return keepAliveComponents;
    }
  }
};
</script>

In the above code, we use the computed attribute keepAliveComponents to get the component name with the meta.keepAlive attribute and set it to the value of the include attribute.

3. Use activated and deactivated hook functions in components that need to be cached

In components that need to be cached, you can use activated and deactivated hook functions to monitor the activation and deactivation of components Deactivate event. In the activation event, corresponding data requests or other operations can be performed; in the deactivation event, data can be cleaned or other processing can be performed. For example:

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  activated() {
    // 组件激活时执行的操作
  },
  deactivated() {
    // 组件停用时执行的操作
  }
};
</script>

By using activated and deactivated hook functions, you can better control the component's life cycle and data processing.

4. Testing effect

After completing the above steps, we can test the effect of keep-alive. When switching routes, if the meta.keepAlive property is true, the component will be cached; otherwise, it will not be cached.

Summary:

By using Vue’s keep-alive component, we can easily optimize the routing switching effect, avoid repeated loading of components and data, and improve page loading speed and user experience. In project development, keep-alive should be used flexibly according to actual scenarios, and combined with activated and deactivated hook functions for data processing and optimization.

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