• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue报错: <router-view> can no longer be used directly inside <transition> or <keep-alive>

开发技术 开发技术 4天前 8次浏览

最近在学习vue3,在搭建项目的时候,使用 keep-alive 的包裹 router-view 会有警告信息

<router-view> can no longer be used directly inside <transition> or <keep-alive>

 

代码如下:

<transition
  :name="!noTransition ? 'fade-transform' : ''"
  :mode="!noTransition ? 'out-in' : ''"
>
  <keep-alive :include="cachedViews">
    <router-view :key="key" />
  </keep-alive>
</transition>

 

提示以下警告

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:

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

 

从警告信息可以看出是路由包裹出现了问题,现做如下调整

<router-view :key="key" v-slot="{ Component }">
  <transition
    :name="!noTransition ? 'fade-transform' : ''"
    :mode="!noTransition ? 'out-in' : ''"
  >
    <keep-alive :include="cachedViews">
      <component :is="Component"></component>
    </keep-alive>
  </transition>
</router-view>

  

 


喜欢 (0)