javascript - 我是否缺少 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

Something 定义了 .fade-enter 和 .fade-appear 类。如果您有一个在一次勾选后调用调试器的链接，您可以看到这种情况发生，并检查应用的样式:

stopThings () {
  this.$router.push({
    name: 'Login'
  });

  this.$nextTick(() => {
    debugger;
  });
}

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

将您的转换和转换类重命名为任何其他名称，例如myfade 并且您的转换按预期工作。