Vue3 动态路由 KeepAlive 设计方案

1. 组件设置 name

核心：keep-alive 只认组件 name，所以 cachedViews 或 include 必须用组件 name，而不是路由 name。

1. defineComponent模式

<script lang="ts">
import { defineComponent} from 'vue';
export default defineComponent({
  name: 'CustomName'
})
</script>

2. setup语法糖

需要单独新增一个script标签

// 页面为 TSX 时，需将 <script> 标签改为 lang="tsx"
<script lang="ts">
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

Vue 3.3 中新引入了 defineOptions

defineOptions({
  name: 'CustomName',
  inheritAttrs: false,
  // ... 更多自定义属性
})

3. 借助插件

vue-macros 插件

2. 动态生成组件 name 的实践方案

相较于前端存储全量路由结合接口权限过滤的方案，此方案借助 Vue2 createCustomComponent 的思路：

• 每条路由都会生成一个独立的组件对象，并为其分配唯一的 name
• 在动态生成组件时，将组件的 name 设置为基于路由 path 处理后的安全名称

1. createCustomComponent

import { defineAsyncComponent, defineComponent, h } from "vue";

/**
 * @param {String} name 组件名称 (必须与 keep-alive 的 include 匹配)
 * @param {Function} componentLoader 即 () => import(...)
 */
export function createCustomComponent(name: string, componentLoader: any) {
  // 1. 检查 componentLoader 是否存在
  if (!componentLoader || typeof componentLoader !== "function") {
    console.error(`[路由错误]: 找不到组件 Name: ${name}`);
    // 返回一个同步的错误占位组件
    return defineComponent({ render: () => h("div", `组件 ${name} 加载失败`) });
  }
  // 2. 将 Vite 的加载函数包装成异步组件
  const AsyncComp = defineAsyncComponent({
    loader: componentLoader, // componentLoader 已经是 () => import(...)
    // 如果需要，可以在这里配置 loadingComponent
  });

  // 3. 直接返回渲染函数，渲染异步组件
  return defineComponent({
    name, // Keep-Alive 通过这个 name 识别缓存
    setup() {
      // 保持 AsyncComp 为直接子级
      return () => h(AsyncComp);
    },
  });
}

2. 组件名转化

// 将 path 转成合法的组件名，避免 '/' 等字符
function getComponentNameByPath(path: string) {
  return path.replace(/\//g, '-').replace(/^-/, '');
}

3. 路由接入示例

component: () => import("@/views/dashboard/index.vue")
// 调整为
component: createCustomComponent("Dashboard", import("@/views/dashboard/index.vue"))

3. 通用组件缓存策略

疑问：如果共用一个组件来进行创建、编辑、详情，怎么根据路径进行匹配？

假设路径是：/banner-list/banner-create、/banner-list/banner-edit、/banner-list/banner-detail 需要先进行路径命中匹配，无法命中则直接进行默认匹配：

• 先解析上层路径，找到文件所在位置
• 再进行精准匹配，比如：公共组件统一命名为：basic-component

// 扫描views目录下的vue文件
const modules = import.meta.glob("@/views/**/**.vue");
// 全局需要 keepAlive 的 path 列表
const keepAliveRoutes: string[] = [];
/**
* 解析后端返回的路由数据并转换为 Vue Router 兼容的路由配置
*
* @param rawRoutes 后端返回的原始路由数据
* @returns 解析后的路由配置数组
*/
const parseDynamicRoutes = (rawRoutes: RawRoute[]): RouteRecordRaw[] => {
  const parsedRoutes: RouteRecordRaw[] = [];

  rawRoutes.forEach(item => {
    const childrenColumn: RouteRecordRaw = {
      path: item.path,
      name: item.name,
      component: Layout,
      meta: {
        title: item.name,
        icon: item.icon || iconMap[item.path],
      },
      children: [] as RouteRecordRaw[],
    };
    if (item.children?.length) {
      childrenColumn.redirect = item.children[0].path;
      item.children.forEach(v => {
        childrenColumn.children.push({
          path: v.path,
          name: getComponentNameByPath(v.path),
          meta: {
            title: v.name,
            // 满足条件的path开启 keepAlive
            keepAlive: keepAliveRoutes.includes(v.path),
            // 取二级路由为高亮，兼容二、三级路由匹配
            activeMenu: v.path.match(/^/[^/]+/[^/]+/)?.[0],
          },
          component: createCustomComponent(
            getComponentNameByPath(v.path),
            modules[`/src/views${v.path}/index.vue`],
          ),
        });
      });
    }

    parsedRoutes.push(childrenColumn);
  });

  return parsedRoutes;
};

4. Vue2 createCustomComponent

// 将 path 转成合法的组件名，避免 '/' 等字符
function getComponentNameByPath(path) {
  return path.replace(/\//g, '-').replace(/^-/, '');
}

/**
 * @param {String} name 组件自定义名称
 * @param {Component | Promise<Component>} component
 */
export function createCustomComponent(name, component) {
  return {
    name,
    data() {
      return {
        // 这里的 component 指向解析后的组件对象
        component: null
      };
    },
    async created() {
      // 这里的 component 指向传入的参数（可能是 Promise）
      if (component instanceof Promise) {
        try {
          const res = await component;
          this.component = res.default || res;
        } catch (error) {
          console.error(`无法解析组件 ${name}:`, error);
        }
      } else {
        this.component = component;
      }
    },
    render(h) {
      if (!this.component) return null;
      // 只负责渲染组件，不传递任何东西
      return h(this.component);
    }
  };
}

// 调整路由文件获取
import NotFound from '@/components/NotFound';
const pagesContext = require.context('@/pages', true, /.vue$/);

function resolveComponent(path) {
  const directPath = `.${path}.vue`;
  const indexPath = `.${path}/index.vue`;

  let modulePath = null;
  if (pagesContext.keys().includes(directPath)) {
    modulePath = directPath;
  } else if (pagesContext.keys().includes(indexPath)) {
    modulePath = indexPath;
  }

  // 返回懒加载函数
  if (modulePath) {
    return () => Promise.resolve(pagesContext(modulePath).default);
  }

  // 找不到文件
  console.warn(`[router error] 页面未找到: ${path}`);
  return () => Promise.resolve({ render: h => h(NotFound, { props: { path } }) });
}

// 组件匹配示例代码
item.children.forEach(v => {
  childrenColumn.children.push({
    path: v.path,
    name: getComponentNameByPath(v.path),
    meta: {
      title: v.name,
      // 满足条件的path开启 keepAlive
      keepAlive: keepAliveRoutes.includes(v.path),
      // 取二级路由为高亮，兼容二、三级路由匹配
      activeMenu: v.activeMenu || v.path.match(/^\/[^/]+\/[^/]+/)?.[0]
    },
    component: createCustomComponent(getComponentNameByPath(v.path), resolveComponent(v.path))
  });
});