背景
题目写的比拟形象，我先形容一下场景
首先咱们的我的项目是须要Vue多层嵌套路由的，即router-view中应用的页面还会有router-view。另外咱们须要用到keep-alive进行页面级别的缓存，并且两层router-view都有用到，每个router-view的代码款式都如下
<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"></component> </keep-alive> <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"></component></router-view>遇到的问题
在一部分叶子页面加载时，发现生命周期钩子执行了两次，而且重复确认了路由跳转只有一次（屡次同一个路由也不会真的执行不是）
问题起因
通过排查后发现，其实本源在于最外层的那个router-view中应用了$route的name和meta进行了判断，但这个$route并不合乎预期。$route始终指向的是最外层的叶子节点路由，而咱们在外层判断冀望的则是一级目录的route，天然就会出问题。留神即便语法换成VueRouter4反对的v-slot="{ Component, route }"，这里的route也仍然有这个问题
解决方案
最间接的形式就是把router的层级都打平，天然就没有这个问题了，但这太low了，革新老本也不低。我的计划则是在外层router-view的时候，判断获取的route层级，如果不是一级目录则通过以后route获取后再应用，具体代码如下
<router-view v-slot="{ Component, route }"> <keep-alive> <component :is="Component" :key="getFirstLevelRoute(route).name" v-if="getFirstLevelRoute(route).meta.keepAlive"></component> </keep-alive> <component :is="Component" :key="getFirstLevelRoute(route).name" v-if="!getFirstLevelRoute(route).meta.keepAlive"></component></router-view>getFirstLevelRoute (route) { if (!Array.isArray(route.matched) || route.matched.length === 0) { return route; } return route.matched[0];}