我是否缺少vue路由器转换的内容？

Question

我正在尝试在Vue中的组件之间进行转换，这是我的代码：

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}

但是，过渡根本不起作用。它可以正确地在组件之间切换，但无需过渡。

我已经阅读了Vue和Vue Router文档，据我所知我正在按照文档所说的去做。有人知道我的缺失或做错了吗？

Answer 1

某些东西定义了hdc和.fade-enter类。如果您有一个链接，可在一刻之后调用调试器，并检查应用的样式，就会看到这种情况：

.fade-appear

由于初始状态不正确，因此过渡不会执行任何操作。

将转换和转换类重命名为其他名称，例如stopThings () { this.$router.push({ name: 'Login' }); this.$nextTick(() => { debugger; }); } ，您的过渡将按预期进行。

Answer 2

从共享代码中可以看到，过渡看起来不错。过渡可能发生在视图之外。在过渡期间，两个元素都是可见的

这是添加具有相对位置和绝对位置的包装器的示例

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style scoped>
.content {
  position: relative;
}
.content > * {
  position: absolute;
  top: 0;
  left: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>