Vue-Router多级路由时，父组件重复加载的问题。

复现

代码中使用了两层路由，并且每层路由都使用了keep-alive，App.vue内初始代码如下：

代码语言：javascript复制

<router-view v-slot="{Component}">
   <keep-alive>
       <component :is="Component" :key="$route.name"/>
  </keep-alive>
</router-view>

然后下级路由View.vue有三个子路由，View.vue代码同上。

一、问题描述

实际使用过程中发现分别加载view的三个子路由时，View.vue会初始化三次。然后就开始考虑问题出现原因存在的可能性。

1.  Vue-Router Bug？显然不是。
2.  keep-alive的缓存失效？除了这三次初始化，往后都正常，说明是重复加载 了三次。
3. 确定是重复加载了，开始排查代码

keep-alive让组件被切换之后，组件不被销毁，同时component的key值保证组件的复用，而代码中的key使用的是路由名称，子路由的路由名称都是不相同的，也就导致了组件无法被正常复用。

二、解决办法

给父路由、子路由添加相同的元信息标识，作为key值，参考如下：

代码语言：javascript复制

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

再次测试，一切Ok。

vue.js

0 人点赞