vue transition 与 vue router 复用的冲突

Question

比如有显示员工信息的页面 /udetail, 页面左侧显示员工列表，通过点击， 右侧显示不同的明细信息。
由于是同一个router （url不变）， 更新数据通过 beforeRouteUpdate() 完成。

因此加载员工明细页面的 transition， 只有在通过别的url跳转该页面的时候有效。 而后续切换不同员工信息的时候， transition就无效了。

如何破解？

Answer 1

<transition> 只会把过渡效果应用到其包裹的内容，你是不是这样写的？

<transition>
    <router-view></router-view>
</transition>

如果是这样的话，只会在url改变的时候才会生效。
你可以这样：官方文档transition

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>