代码中使用了两层路由,并且每层路由都使用了keep-alive,App.vue内初始代码如下:
<router-view v-slot="{Component}">
<keep-alive>
<component :is="Component" :key="$route.name"/>
</keep-alive>
</router-view>
然后下级路由View.vue有三个子路由,View.vue代码同上。
实际使用过程中发现分别加载view的三个子路由时,View.vue会初始化三次。然后就开始考虑问题出现原因存在的可能性。
keep-alive让组件被切换之后,组件不被销毁,同时component的key值保证组件的复用,而代码中的key使用的是路由名称,子路由的路由名称都是不相同的,也就导致了组件无法被正常复用。
给父路由、子路由添加相同的元信息标识,作为key值,参考如下:
<router-view v-slot="{Component}">
<keep-alive>
<component :is="Component" :key="$route.meta.id"/>
</keep-alive>
</router-view>
再次测试,一切Ok。