vue中使用keep-alive缓存页面

红太狼 2021-07-25 17:21 496阅读 0赞

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

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

# 方式一： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

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

![20200715123013302.png][]

# 方式二： #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

![20210416163530652.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/e1cf332fa416406fa771021836d34bea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/1b545315e89743c88831b926874c5bc1.png
[20200715123013302.png]: /images/20210725/22ea89fc38464b058ca8bbaf80bfc132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/2e198c52358744c8b198d1961a5458e1.png
[20210416163530652.png]: /images/20210725/c85ae8fd7dc7426cbb10d981056e19ca.png