我正在尝试在 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 文档,据我所知,我正在按照文档的说明进行操作。有人知道我错过了什么或做错了什么吗?
最佳答案
Something 定义了 .fade-enter
和 .fade-appear
类。如果您有一个在一次勾选后调用调试器的链接,您可以看到这种情况发生,并检查应用的样式:
stopThings () {
this.$router.push({
name: 'Login'
});
this.$nextTick(() => {
debugger;
});
}
由于初始状态不正确,因此转换不会执行任何操作。
将您的转换和转换类重命名为任何其他名称,例如myfade
并且您的转换按预期工作。
关于javascript - 我是否缺少 vue 路由器转换的某些内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55994892/