VUE嵌套路由 component属性key的作用

背景

首先我们的项目是需要Vue多层嵌套路由的，即router-view中使用的页面还会有router-view。另外我们需要用到keep-alive进行页面级别的缓存，并且两层router-view都有用到，每个router-view的代码样式都如下

<router-view v-slot="{ Component, route }">
   <keep-alive>
      <component :is="Component" :key="route .fullPath" v-if="route.meta.keepalive"></component>
   </keep-alive>
   <component :is="Component" :key="route .fullPath" v-if="!route.meta.keepalive""></component>
</router-view>

遇到的问题

当keepalive为true时候, 在一部分叶子页面加载时，发现生命周期钩子执行了两次，

image.png

问题原因

经过排查后发现，其实根源在于最外层的那个router-view中使用了route的name和meta进行了判断，但这个route并不符合预期。route始终指向的是最外层的叶子节点路由，而我们在外层判断期望的则是一级目录的route，自然就会出问题

解决方案

<script setup lang="ts">
import { RouteLocationNormalized } from 'vue-router';

const getFirstLevelRoute = (route: RouteLocationNormalized) => {
  if (!Array.isArray(route.matched) || route.matched.length === 0) {
    return route.fullPath;
  }
  return route.matched[0].name;
};
</script>

<template>
  <router-view v-slot="{Component,route}">
    <keep-alive>
      <component :is="Component" v-if="route.meta.keepalive" :key="getFirstLevelRoute(route)" />
    </keep-alive>
    <component :is="Component" v-if="!route.meta.keepalive" :key="route.fullPath" />
  </router-view>
</template>

参考:https://segmentfault.com/a/1190000041459646?utm_source=sf-similar-article

key的作用

image.png

1.当我们不加key时 父组件/user 将会被复用
2.让router-view的key的唯一性会导致 动态渲染路由无法复用组件