vue中用到keep-alive部分页面缓存，怎么和transition综合使用


不用部分缓存时是这样的：
<transition  :name="direction" mode="out-in">
    <keep-alive>
          <router-view></router-view>
    </keep-alive>
</transition>
现在变成如下这样，那么transition怎么加上去，不会有问题？求指教大神！
<keep-alive>
        <router-view v-if="$route.meta.keepAlive" ></router-view>
</keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

解决方案 »

  1.   

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

  2.   

    <transition :name="transitionName" mode="out-in">
                    <!-- 这里是需要keepalive的 -->
                    <keep-alive v-if="$route.meta.keepAlive">
                        <router-view :g="g" class="child-view keep-alive"></router-view>
                    </keep-alive>
                </transition>
                <transition :name="transitionName" mode="out-in">
                    <!-- 这里不会被keepalive -->
                    <router-view v-if="!$route.meta.keepAlive" :g="g" class="child-view"></router-view>
                    <!-- <router-view :g="g" class="child-view"></router-view> -->
                </transition>