vue中使用keep-alive缓存页面

当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时），就可以考虑使用keep-alive缓存页面了。可以使用include和exclude去指定自己想要缓存的页面或不想缓存的页面。

比如这里我想缓存“main”页面：

方式一：

        <keep-alive :include="cacheRoute">
          <router-view></router-view>
        </keep-alive>

注意，一定要让被缓存的组件加上“name”属性，否则缓存会失效！

方式二：

在路由上自定义一个属性，用来判断当前路由是否缓存

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

          <!-- 不被缓存 -->
          <router-view v-if="!$route.meta.keepAlive" />