1

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

// 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>.警告，这似乎很奇怪，因为我使用了正确的语法恕我直言。这是有意的，如果是这样，我错过了什么？

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

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

4

2 回答 2

1

在这种情况下不应该显示警告，但仅当“路由器视图”是“转换”或“保持活动”组件的直接子级时。

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

于 2022-02-14T23:39:25.323 回答
0

根据官方指南，您应该<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>

另一种方式可能是条件渲染、 usingv-if和v-else指令。

于 2022-01-25T12:27:21.650 回答