全部缓存
使用Keep-alive标签包裹router-view就可以实现全部缓存
<keep-alive>
<router-view> </router-view>
</keep-alive>
缓存单个指定的路由
同样使用Keep-alive标签包裹router-view,在Keep-alive中使用include指定需要缓存的页面的名称即可
<keep-alive include='缓存页面的名称'>
<router-view> </router-view>
</keep-alive>
缓存多个指定路由
需要使用两个router-view两个标签,一个作为缓存的出口一个作为不换缓存的出口,然后在路由配置的时候给缓存的页面加上meta属性,然后设置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不缓存
}