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>