zoukankan      html  css  js  c++  java
  • vue报错: <router-view> can no longer be used directly inside <transition> or <keep-alive>

    最近在学习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>
    

      

  • 相关阅读:
    牛客练习赛51
    [HZOI 2016] 偏序(CDQ套CDQ)
    AtCoder Beginner Contest 140
    [国家集训队] 拉拉队排练
    [CF91B] Queue
    [AT3867] Digit Sum 2
    [TJOI2007] 路标设置
    [HNOI2001] 求正整数
    [十二省联考2019] 异或粽子
    [SDOI2013] 直径
  • 原文地址:https://www.cnblogs.com/cap-rq/p/14869714.html
Copyright © 2011-2022 走看看