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="{ Co
·
在学习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>
更多推荐
已为社区贡献47条内容
所有评论(0)