Vue3 路由器 + 转换警告

Question

我有一个带有转换的包装器组件：

// Wrapper.vue

<template>
  <transition
    appear
    mode="out-in"
    enter-active-class="animate__animated animate__fadeIn animate__faster"
    leave-active-class="animate__animated animate__fadeOut animate__faster"
  >
    <div :key="$route.path">
      <slot />
    </div>
  </transition>
</template>

然后，我用路由器中的一些组件填充默认插槽，如下所示：

// Page.vue

<template>
  <Wrapper>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </Wrapper>
</template

我正在 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. 警告，这看起来很奇怪，因为我使用的是正确的语法恕我直言。这是故意的吗？如果是的话，我错过了什么？

注意：它工作正常，我只是不喜欢看警告:)

编辑：更多上下文 - 我正在尝试为桌面和移动设备创建包装器，而桌面设备应该具有上述转换。移动设备包装器的做法完全不同，与此处无关。

Answer 1

根据官方指南，您应该在 <RouterView /> 和 vice-versa 中使用 <transition> or <keep-alive> 不适用。

<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 2

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

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

Vue3 路由器 + 转换警告

Vue3 router + transitions warnings

vue.js

vue-router

vue-transitions

vuejs3

更新：