Reprint: VUE3 reports an error when switching between keep-alive pages: TypeError: parentComponent.ctx.deactivate is not a function

This is VUE official sample code:

<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
</router-view>

However, there is a high probability that an error will be reported when switching tab pages: TypeError: parentComponent.ctx.deactivate is not a function

Solution:
Change the code to the following (add the key attribute to the component in keep-alive):

<router-view #default="{ Component, route }">
	<keep-alive>
		<component :is="Component" :key="route.name" v-if="route.meta.keepAlive"/>
	</keep-alive>
	<component :is="Component" :key="route.name" v-if="!route.meta.keepAlive"/>
</router-view>  

If an error is still reported, set the VUE-CLI configuration items and turn off hot updates: (vue.config.js)

devServer: {
    
    
	hot: false, //true开启
}

——————————————
Copyright Statement: This article is an original article by CSDN blogger “qq_15197419” and follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement when reprinting .
Original link: blog.csdn.net/qq_15197419/article/details/123005480