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();
}