一、设置动画

  1. //views/Movie/detail.vue
  2. <template>
  3. <div id="detailContainer" class="slide-enter-active">
  4. </div>
  5. </template>
  6. <style scoped>
  7. .slide-enter-active{
  8. animation:.3s slideMove;
  9. }
  10. @keyframes slideMove {
  11. 0%{
  12. transform: translateX(100%)
  13. }
  14. 100%{
  15. transform: translateX(0%)
  16. }
  17. }
  18. </style>

这样从列表切换到详情页的时候就会触发一个动画。

二、设置默认路由

这样从列表切换到详情页的时候就会触发一个动画,但会存在一片空白,这样可以设置一个默认路由
tab.gif

  1. {
  2. path:'detail/:id',
  3. components:{
  4. default:()=>import("@/components/InTheaters"),
  5. detail:()=>import('@/views/Movie/detail')
  6. },
  7. props:{
  8. detail:true
  9. }
  10. }