<keep-alive>组件缓存问题

[gongph]

如下代码：

<keep-alive>
    <router-view></router-view>
</keep-alive>

通过路由匹配到的组件都将被 cache 了， 如果其中的组件我不想缓存该怎么做呢？

[fnlctrl]

暂时没有直接支持。不过现在你可以在meta里定义是否keepAlive来workaround。

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

未来会直接支持，https://github.com/vuejs/vue/projects/3#card-487045

[gongph]

这样做的话，相当于说，要么组件都不缓存，要么都被缓存，是这样吗？

[fnlctrl]

不是。这样做是只有你设置了meta: {keepAlive: true}的会被缓存，其他不会缓存。

[gongph]

多些指点。请收下我的膝盖！

[rousos87]

@gongph

For example in your routes config

const router = new VueRouter({
      routes: [{
              path: '/',
              component: Home,
              meta: {
                  keepAlive: true
              },
              children: [{
                  path: '/Profile',
                  component: Profile,
                  meta: {
                      keepAlive: false
                  }
              }
]
})

and then in your file that exists

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

The first component will be cached but the second not.

Hope it helps.

[gongph]

thank you very much @rousos87

[JounQin]

@fnlctrl 实测在进入 keepAlive: false 的组件后再重新进入 keepAlive: true 的组件时原来的状态丢失了，如果切换路由一直是 keepAlive: true 则没问题。

[fnlctrl]

@JounQin 请给重现

[JounQin]

@fnlctrl
https://jsfiddle.net/JounQin/gL8z5zq1/

[JounQin]

@fnlctrl 抱歉，判断条件加错地方了，都是 <router-view/> 组件上判断确实是可以了，但是像这样使用为什么会出问题呢？

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

https://jsfiddle.net/JounQin/gL8z5zq1/2/

[fnlctrl]

@JounQin
这个方法的原理是，<keep-alive>的子节点在被销毁之前会被缓存下来，所以要给它的子节点加v-if。<keep-alive>本身不能被销毁，否则就没作用了，所以不能给它加v-if。

[ibeizhu]

请问在vue router 1.X能否支持如上keep alive的功能？ @fnlctrl

[fnlctrl]

组件形式的keep-alive是vue 2.0的功能，不是vue-router的，所以1.x不会支持。

…

On Wed, Nov 30, 2016, 23:10 Moment Wang ***@***.***> wrote: 请问在vue router 1.X能否支持如上keep alive的功能？ @fnlctrl <https://github.com/fnlctrl> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#811 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFTLl6rPrNYvQ3-3HbYOyrD1firAofgyks5rDZHWgaJpZM4Kcykd> .

[KangdaOOLin]

@fnlctrl 我有一个问题

<transition name="fade" mode="out-in">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

上面的代码会报错： <transition> can only be used on a single element. Use for lists。

虽然我知道是什么原因报错，但我想问的是，怎么去动态使用keep-alive，并结合transition和router-view？

我尝试了不同的组合：

<transition name="fade" mode="out-in">
  <keep-alive v-if="$route.meta.keepAlive">
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

上面的代码会导致keep-alive无法起作用，上面也讲到了。

<transition name="fade" mode="out-in">
  <template v-if="$route.meta.keepAlive">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
  </template>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

上面的代码同样会导致keep-alive无法起作用~~

<transition name="fade" mode="out-in">
  <div>
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</transition>

上面的代码，keep-alive能起作用，但无法实现过渡的效果，因为不满足过渡动画的条件~~