解决vue3 TypeError: parentComponent.ctx.deactivate is not a function 报错

报错详情：

runtime-core.esm-bundler.js:6055 Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
    at unmount (runtime-core.esm-bundler.js:6055:33)
    at patch (runtime-core.esm-bundler.js:5027:13)
    at sharedContext.activate (runtime-core.esm-bundler.js:2420:13)
    at processComponent (runtime-core.esm-bundler.js:5465:37)
    at patch (runtime-core.esm-bundler.js:5058:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5680:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5714:56)
    at updateComponent (runtime-core.esm-bundler.js:5539:26)
    at processComponent (runtime-core.esm-bundler.js:5472:13)

router-view官方示例：

<router-view v-slot="{ Component, route }">
  <!-- 注意  v-if="route.meta.isKeepAlive"放在keep-alive标签上不会生效 -->
  <keep-alive>
    <component :is="Component" v-if="route.meta.isKeepAlive"></component>
  </keep-alive>
  <component :is="Component" v-if="!route.meta.isKeepAlive"></component>
 </router-view>

解决办法：

我们只要为component动态组件添加一个唯一属性`key`即可

<router-view v-slot="{ Component, route }">
  <!-- 注意  v-if="route.meta.isKeepAlive"放在keep-alive标签上不会生效 -->
  <keep-alive>
    <component :is="Component" :key="route.name" v-if="route.meta.isKeepAlive"></component>
  </keep-alive>
  <component :is="Component" :key="route.name" v-if="!route.meta.isKeepAlive"></component>
</router-view>