keep-alive页面缓存

keep-alive页面缓存

1、路由配置meta

export default [{
    path: '/cache-page',
    name: 'CachePage',
    component: CachePage,
    meta: {
      keepAlive: true // 缓存
    }
  }
]
// 路由设置
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2、使用keep-alive属性，搭配activated和deactivated钩子实现页面缓存。

周期顺序：created > mounted > activated

<keep-alive :include="includeNames" :exclude="excludeNames" :max="10">
	<router-view></router-view>
</keep-alive>
activated() {
// 执行页面一进入就会加载的方法
}
deactivated() {
// 组件销毁时触发
}