vue-router 官网中有这样一段文字
<router-view> 的 v-slot
<router-view> 暴露了一个 v-slot API,主要使用 <transition> 和 <keep-alive> 组件来包裹你的路由组件。
<Suspense>
<template #default>
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade'" mode="out-in">
<keep-alive>
<component
:is="Component"
:key="route.meta.usePathKey ? route.path : undefined"
/>
</keep-alive>
</transition>
</router-view>
</template>
<template #fallback> Loading... </template>
</Suspense>
如果只是这样设置就只能做到全局的缓存,当你想使用分别缓存的的话,应该这样使用:
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" v-if="route.meta.keepAlive" />
</keep-alive>
<component :is="Component" :key="route.path" v-if="!route.meta.keepAlive" />
</router-view>
页面分别缓存需要配置key属性,来表示组件的唯一性和对应关系,如::key="$route.path"
这里默认大家知道路由组件的meta的设置,这里就是利用 meta.keepalive 配置实现分别缓存