vue transition 与 vue router 复用的冲突

Vanghohs
  • 183

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

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

如何破解?

回复
阅读 2.7k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏