导航时嵌套的Vue路由器视图转换没有反应答案

【问题标题】：Nested Vue router-view transition not reacting when navigating导航时嵌套的Vue路由器视图转换没有反应
【发布时间】：2020-09-07 18:37:07
【问题描述】：

这里是代码示例：

https://jsfiddle.net/9jypnkue/

当主路由视图也在转换时，嵌套视图的 transition v-on:enter="enter" 不会被调用。

<router-view ref="nestedView" v-slot="{ Component }">
  <transition v-on:enter="enter">
    <component :is="Component"/>
  </transition>
</router-view>

我希望同时调用两个动画。

使用 Vue 3 和 Vue Router 4 候选版/测试版。

【问题讨论】：

原因似乎是你直接从Home路由到nestedView，在这种情况下内部转换不会发生，因为它首先挂载到父级，然后再挂载到dom。如果添加另一个Parent 链接，然后从parent 路由到nestedView，您将看到enter 事件被触发：jsfiddle.net/g02tdvko
谢谢。是的，这是正确的，但是，在很多情况下，用户可能会直接导航到 nestedView，而我想要的效果是两个路由器视图都应该转换。我一直在尝试在触发主转换后强制将 nestedView 安装到 DOM，但它不起作用jsfiddle.net/bpetg71a/1

标签： vue.js vue-router

【解决方案1】：

将“出现”添加到路由器修复它：

<router-view ref="nestedView" v-slot="{ Component }" appear>
  <transition v-on:enter="enter">
    <component :is="Component"/>
  </transition>
</router-view>

https://jsfiddle.net/27qae5zj/1/

【讨论】：