报错详情:
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>