在 vue-router 中使用组路由时 Vue 转换失败

Question

我想在顶层使用组路由和嵌套路由，所以我找到了 issue1、issue2 并解决了问题。

但是当我为 <route-view> 添加转换标签时，使用组路由转换无法正常工作。
这是完整的代码https://codepen.io/changemyminds/pen/ExmLdBM

您单击 Home -> Profile 和 Profile -> Home 过渡工作正常，但是当您单击 User -> Role 和 Role -> User 时过渡工作失败并且只是闪烁。

一些代码片段。

路线

const router = new VueRouter({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/prfile', name: 'Profile', component: Profile },
    { 
      path: '/admin',
      name: 'Admin',
      component: { render: (h) => h("router-view") },
      redirect: "/admin/user",
      children: [         
        { path: 'user', name: 'User', component: User },
        { path: 'role', name: 'Role', component: Role }
      ]
    }
  ]
});

查看

  <div>
    <h1>Correct Transition</h1>    
    <router-link :to="{ name: 'Home'}">
      <button>Home</button>
    </router-link>
   
    <router-link :to="{ name: 'Profile'}">
      <button>Profile</button>
    </router-link>    
 
  </div>
  <div>
    <h1>Failed Transition</h1>   
    <router-link :to="{ name: 'User'}">
      <button>User</button>
    </router-link>

    <router-link :to="{ name: 'Role'}">
      <button>Role</button>
    </router-link> 
  </div>
  
  <transition name="slide-fade">
    <router-view></router-view>
  </transition>

CSS

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

似乎 v-leave-active 和 v-leave-to 不工作。有谁知道为什么？

Answer 1

终于找到问题了，因为我丢了父<router-view>上的key。

如果我用 this.$route.path 设置键，Vue 虚拟 DOM 会有所不同，并会再次触发转换。

查看

<div id="app">
  <!-- same tag bypass... -->

  <transition name="slide-fade">
    <router-view :key="key"></router-view>
  </transition>
</div>

路线

<!-- same routes bypass... -->

new Vue({
  el: "#app",
  router,
  computed: {
    key() {
      return this.$route.path;
    }
  }
});

https://codepen.io/changemyminds/pen/XWRqyEr

Answer 2

由于vue切换不刷新页面，所以不会触发页面上的钩子函数。官方的做法是监听路由的变化，也可以通过在

中添加一些参数

在 vue-router 中使用组路由时 Vue 转换失败

Vue transition failed when use group routes in vue-router

vue.js

vuejs2

vue-router

transition