Three ways of vue routing cache

cache all

All caching can be achieved by wrapping router-view with Keep-alive tag

<keep-alive>

  <router-view> </router-view>

</keep-alive>

Cache a single specified route

Also use the Keep-alive tag to wrap router-view, and use include in Keep-alive to specify the name of the page to be cached

<keep-alive include='缓存页面的名称'>

  <router-view> </router-view>

</keep-alive>

Cache multiple specified routes

You need to use two router-view tags, one as the exit of the cache and the other as the exit without changing the cache, and then add meta attributes to the cached page during routing configuration, and then set the value of keepAlive

<keep-alive>

  <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

{
    
    
 path:'/car',

 name:'car',

 component: Car,

 meta: {
    
    keepAlive: true} //true缓存 false不缓存
}