keep-alive 按需缓存组件

按需缓存组件

给要缓存的路由做个标记，然后在载入路由时，动态决定是否要缓存。更加精确控制要缓存的组件。

1.在定义路由时，额外添加路由元信息 meta ，来补充一些信息要素。

{ path: '/home', component: Home, meta: { isKeepAlive: true } },

2.在 app.vue 中做处理

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.isKeepAlive"></router-view>
    </keep-alive>

    <router-view v-if="!$route.meta.isKeepAlive"></router-view>
  </div>
</template>

这样就可以把需要缓存的组件进行缓存