我想使用组路由和嵌套路由挂载在顶层，所以我找到了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 不起作用。有谁知道为什么？