Javascript Vue 3–；淡入过渡中断

然而，我读了Vue 2中的转换更改，也读了Vue 3文档，但我仍然不知道如何使转换工作我对Vue很陌生。

旧页面应该淡出，新页面应该淡入，但我无法让它工作

除了默认组件之外，我真的不知道在

包装器中写什么。我尝试将组件更改为视图的名称，但这不起作用

我的

App.vue

<router-view :key="route.path" v-slot="{Component}" />
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

我的文件夹结构：

Components: – Header.vue
  |         - Footer.vue
  |
Views:      - Home.vue
            - About.vue
            - Something.vue

---

感谢您提供有关如何使渐变工作的任何提示

尝试使用

。将淡入淡出设置为
：


Vue.createApp({
设置（）{
常数测试=Vue.ref（假）；
返回{test}
}
}).mount（“#应用程序”）
。淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度1s；
}
.淡入，
.淡出{
不透明度：0；
}

褪色
切换
是的，那太完美了，但是我不能用每个Vue3包装。当包装
时，转换仍然工作相同。不幸的是，它说
[Vue warn]：属性“Component”在渲染期间被访问，但没有在实例上定义。
我已经更新了我的答案，以包含您的代码片段。它对我来说就像预期的那样工作，对你来说仍然不工作吗？我必须删除组件标记中的尾随斜杠来删除[Vue warn]，然后它工作了。CSS的Thx！
Components: – Header.vue
  |         - Footer.vue
  |
Views:      - Home.vue
            - About.vue
            - Something.vue