关于前端:Vue多层嵌套路由使用keepAlive时子页面二次初始化问题

背景

题目写的比拟形象，我先形容一下场景
首先咱们的我的项目是须要 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];
}