vue-router@4.1新特性下的keep-alive

升级vue-router@4.1版本后，路由可以省略父组件中的 component/components

const routes = [
  {
    path: '/admin',
    children: [
      { path: '', component: AdminOverview },
      { path: 'users', component: AdminUserList },
      { path: 'users/:id', component: AdminUserDetails },
    ], 
  },
]

由于父级未指定 component，因此 <router-view> 将跳过父级，使用相关子路由中的 component。

缓存路由页面

在做管理后台页面项目的时候，通常会有下面一段代码，缓存路由页面。通常只需要在路由拦截器中将需要换成的路由name加到cacheList即可

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in" appear>
      <keep-alive :include="cacheList">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useTabBarStore } from '@/store'

const tabBarStore = useTabBarStore()

const cacheList = computed(() => tabBarStore.getCacheList)
</script>

4.1版本之前，如果需要实现多级路由缓存

• 方案一：将所有路由都提升到同一层级，带来的问题是，多级路由语义不明显，父子路由关系不明确，通过路由生成菜单变复杂。
• 方案二：多级路由场景下，需要缓存父路由的同时在子路由上也加上缓存，父路由缓存复杂，需要清除缓存的场景实现更加复杂。

4.1+版本多级路由的场景下

因为可以省略父级component，<router-view> 将直接使用子路由的 component，相当于将子路由拿到了父路由这一层级，缓存上就不需要考虑缓存的父路由还是子路由。

原文链接：https://juejin.cn/post/7353245651591315506 作者：大明88