vue路由缓存的三种方式

1.全部缓存

使用Keep-alive标签包裹router-view就可以实现全部缓存

<keep-alive>
  <router-view> </router-view>
</keep-alive>

2.缓存单个指定的路由

同样使用Keep-alive标签包裹router-view，在Keep-alive中使用include指定需要缓存的页面的名称即可

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

可以使用 v-bind 绑定一个 name 数组，也可用 '，' 隔开，也可使用正则表达式，多个的情况建议使用第三种

注意：是缓存页面的 name 名称，而不是缓存页面路由的 name 名称

3.缓存多个指定路由

需要使用两个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不缓存
}

activated和deactivated

activated，deactivated 这两个生命周期函数一定是要在使用了 keep-alive 组件后才会有的，否则不存在。

当引入 keep-alive 的时候，页面第一次进入

钩子的触发顺序 created-> mounted -> activated，退出时触发deactivated。

当再次进入（前进或者后退）时，只触发 activated

注意：keep-alive里面紧跟包裹 router-view 组件，而不能出现其他标签，不然会导致无法缓存页面。