【前端】VUE路由缓存

全部缓存

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

缓存单个指定路由

<keep-alive include="该路由的name名称">
   <router-view></router-view>
</keep-alive>

缓存多个指定路由

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

{
    path:'/test',
    name:'Test',
    component: Test,
    meta: {keepAlive: true} //true缓存 false不缓存
}

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

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

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

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