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

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

現(xiàn)在我想緩存組件，讓列表頁(yè)返回的時(shí)候能保存位置。網(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é)合起來(lái)，這樣用

    <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)建沒(méi)問(wèn)題，但是前端就報(bào)錯(cuò)了：

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

報(bào)錯(cuò)信息讓用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é)果又報(bào)錯(cuò)：

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

明明是加了key了的。

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

---- 分割線---

我沒(méi)有再嘗試加這層 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>

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

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

最后，請(qǐng)教怎么把問(wèn)題改成文章的形式。。不知道為什么，提問(wèn)題的帖子就變成了回答問(wèn)題的帖子了。。。

另外，請(qǐng)教下大家都是怎么處理這個(gè)問(wèn)題的。、