javascript - masalah animasi penghalaan 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'
        }
      }

Seluruh halaman saya hanya mempunyai satu <router-view></router-view> Adakah mustahil untuk membuat laluan yang akan hilang dari kiri dan laluan yang akan masuk dari kanan apabila. bertukar laluan?

Answer 1

Tambah peralihan terus ke komponen

Answer 2

Adakah anda mahu mensimulasikan kaedah penukaran laluan APP

Saya baru-baru ini ingin membuat projek kecil Ia masih merupakan produk separuh siap, tetapi bahagian peralihan telah melaksanakan operasi ini Anda boleh pergi dan lihat jika ia adalah apa yang anda mahukan

.

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

Answer 3

Kemudian tetapkan mod kepada keluar–masuk