Vue3 路由器 + 转换警告

Answer 1

警告在这种情况下不应该显示，但只有当“router-view”是“transition”或“keep-alive”组件的direct子组件时才显示。

该错误已在此处报告：https://github.com/vuejs/router/issues/1306

Answer 2

根据官方指南，您应该在

<transition> or <keep-alive>

内使用

<RouterView />

，反之亦然不适用。

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

<router-view>

公开了一个v-slot API，主要是用

<transition>, <keep-alive>

组件包装你的路由组件。

更新：

计算属性可能对这种情况有帮助。很难，我不知道你是如何为小型设备实现代码的。这是一种方法...

<script>
function isSmallDevice() {
  /*
    code for checking
    device resolution
  */

  return <Boolean>
}

export default {
  computed: {
    setTransitionProperty: function () {
      return isSmallDevice ? '' : 'fade'
    }
  }
}
</script>

<router-view v-slot="{ Component, route }">
  <transition :name="setTransitionProperty" mode="out-in">
    <template #default>
      <component
        :is="Component"
        :key="route.meta.usePathKey ? route.path : undefined"
      />
    </template>
    <template #fallback> Loading... </template>
  </transition>
</router-view>

另一种方法可能是条件渲染，使用

v-if

和

v-else

指令。

Answer 3

从Vue3的官方文档来看，应该是这样的：

<router-view v-slot="{ Component }">
    <Transition name="slide-fade">
      <component :is="Component" />
    </Transition>
 </router-view>

转换名称在

<style>

部分中使用，如下所示：

<style>
 .slide-fade-enter-active {
   transition: all 0.3s ease;
}
 .slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
 .slide-fade-enter-from,
 .slide-fade-leave-to {
  transform: translateX(-10px);
   opacity: 0;
 }
</style>

了解更多信息Vue3 过渡