Vue3.0學習 - 第十六節，Vue3 中router-view警告解決方案vue-router4.0 keep-alive儲存目前頁面資料的正确寫法

在學習vue3發現使用router-view竟然警告了什麼鬼？

警告内容：

[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 }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>
           

這什麼鬼？？

我的router-view代碼如下：

<keep-alive>
    <router-view></router-view>
</keep-alive>
           

這一看也沒毛病啊，查詢官方文檔發現原來vue3中的keep-alive寫法變了 文檔連結

vue3的寫法：

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

這就OK了

官方文檔代碼：

<router-view v-slot="{ Component }">
  <template v-if="Component">
    <transition mode="out-in">
      <keep-alive>
        <suspense>
          <component :is="Component"></component>
          <template #fallback>
            <div>
              Loading...
            </div>
          </template>
        </suspense>
      </keep-alive>
    </transition>
  </template>
</router-view>