Keep-Alive组件的使用

使用场景

组件切换时缓存之前加载的状态不会被销毁，避免反复渲染同时减少网络请求

使用方式

• 使用keep-alive中的属性include或exclude,根据组件name判断

<keep-alive include="test1"><!-- 仅对name为test1的组件缓存 -->
    <router-view></router-view>
</keep-alive>

• 在路由中配置属性标识是否缓存

{
  path: '/test1',
  component: Test1,
  meta: {
    keepAlive: true
  }
},
{
  path: '/test2',
  component: Test2,
  meta: {
    keepAlive: false
  }
}

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

activated和deactivated

引入了keep-alive的页面具备activated和deactivated钩子函数，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated,可以通过activated代替mounted执行一些必要的初始化操作;

清除缓存

通过路由钩子实现根据下一个页面来判断是否缓存

/* test1只在到达test2时缓存 */
beforeRouteLeave(to, from, next) {
    if (from.path==="/test1"&&to.path === "/test2")
        from.meta.keepAlive = true;
    else {
        from.meta.keepAlive = false;
        this.$destroy();
    }
    next();
}