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

【问题标题】：Vue transition failed when use group routes in vue-router在 vue-router 中使用组路由时，Vue 转换失败
【发布时间】：2021-10-06 11:11:51
【问题描述】：

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

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

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

一些代码sn-p。

路线

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 不起作用。有谁知道为什么？

【问题讨论】：

标签： vue.js vuejs2 vue-router transition

【解决方案1】：

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

【讨论】：

【解决方案2】：

最后，我发现了问题，因为我丢失了父级<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

【讨论】：