vue 中 vue-router、transition、keep-alive 怎么結(jié)合使用？

我的路由切換有左滑右滑的效果，于是我是這么使用的。

 <transition :name="name">
     <router-view class="router-view"></router-view>
  </transition>

現(xiàn)在我想緩存組件，讓列表頁返回的時候能保存位置。網(wǎng)上查了下，一般是這么用的

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

我于是把兩者結(jié)合起來，這樣用

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

這樣后端構(gòu)建沒問題，但是前端就報錯了：

<transition> can only be used on a single element.

報錯信息讓用transition-group，于是

    <transition-group :name="name">
      <keep-alive key="keep-alive">
        <router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view class="router-view" v-if="!$route.meta.keepAlive" key="not-keep-alive"></router-view>
    </transition-group>

結(jié)果又報錯：

 <transition-group> children must be keyed: <keep-alive>

明明是加了key了的。

研究發(fā)現(xiàn)transition-group 其實(shí)就是一個div或者span等html元素。
于是我嘗試自己加這層html。

---- 分割線---

我沒有再嘗試加這層 html?。?！因?yàn)槲矣孟旅娴姆绞礁愣耍?/h2>

    <transition :name="name">
      <keep-alive>
        <router-view class="router-view" v-if="$route.meta.alive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="name">
      <router-view class="router-view" v-if="!$route.meta.alive"></router-view>
    </transition>

就是兩個transition，一個負(fù)責(zé)keep-alive組件的動畫，一個負(fù)責(zé) not-keep-alive的動畫。兩邊各管各的。

如果有隱患，后續(xù)我會更新。

最后，請教怎么把問題改成文章的形式。。不知道為什么，提問題的帖子就變成了回答問題的帖子了。。。

另外，請教下大家都是怎么處理這個問題的。、