Recently, I was writing a personal training project. I thought that VUe3.0 should not be too different from 2.0 and the learning cost should not be high, so I used VUe3.0 to do the front end of the project, but now it is a little cracked. It is recommended that those who learn vue2.0 to do projects and habits should not easily switch to 3.0.

1. Keep-alive of Vue2.0

In Vue2.0, the cache is located directly where you want it to be cached. Generally, it is used in conjunction with router-View.

<template>
    <! -- vue2.x configuration --> 
    <keep-alive> 
        <router-view v-if="$route.meta.keepAlive" /> 
    </keep-alive> 
    <router-view v-if=! "" $route.meta.keepAlive"/> 
</template>
Copy the code

Two, Vue3.0 keep-alive use

Vue3.0 slot is used to bind components of the corresponding route using IS.

<template> 
    <! -- Vue3.0 configuration --> 
    <router-view v-slot="{ Component }"> 
    <keep-alive> 
        <component :is="Component" v-if="$route.meta.keepAlive"/> 
    </keep-alive> 
        <component :is="Component" v-if=! "" $route.meta.keepAlive"/> 
    </router-view> 
</template>
Copy the code

Add meta configuration to router

You can comment out which pages need to be cached, but you don’t need to set it. Otherwise, you need to delete all of the above attributes. For more caching restrictions, see the reference site below.

const routes = [
  {
    path: '/keepalive'.name: 'keepalive'.component: () = >import('.. /views/keepalive.vue'),
    meta: {
          keepAlive: false // Set whether the page needs to use caching}}]Copy the code

Refer to the website

First recommended official website documents

  • Vue official document
  • More use of Keep-Alive in vue official API documentation