背景
首先我们的项目是需要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.png1.当我们不加key时 父组件/user 将会被复用
2.让router-view的key的唯一性会导致 动态渲染路由无法复用组件
网友评论