vue3不允许缓存组件keep-alive直接包裹router-view

从vue3开始，不再允许用keep-alive直接包裹router-view，只允许包裹component组件。

所以，要使用缓存，以前可以这么写：

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

从Vue3开始，这种写法不行了，但是可以作如下变通：

<router-view v-slot="{Component}">

<keep-alive>
     <component :is="Component"></component>
</keep-alive>

</router-view>

 

总结：从router-view渲染组件解构出当前组件Component，然后再用动态组件挂载。