javascript - vue路由動畫問題

Question

<template>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
</template>

const routes = [
  { path: '/home', component: home },
  { path: '/detail', component: detail },
  { path: '/order', component: order },
  { path: '/', component: home }
]

    watch: {
        '$route' (to, from) {
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      }

我整個頁面就一個<router-view></router-view>，是不是無法實現路由切換的時候讓即將消失路由從左邊消失，即將進來的路由從右邊進來？

Answer 1

直接在組件中加transition

Answer 2

你想做模擬APP的路由切換方式麼

我最近想做一個小專案,目前還是半成品,但是其中的transition部分已經實現了這個操作,你可以去看看是不是你想要的

https://github.com/tgxpuisb/vue-open-use

Answer 3

再設定mode為out–in