如何提取Vue路由数组中所有路由名称并生成联合类型？

给定如下Vue路由数组：

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Main',
    component: () => import('~/pages/Main.vue'),
    children: [],
  },
  {
    path: '/auth',
    name: 'Auth',
    component: () => import('~/pages/Auth.vue'),
    meta: {
      isAuthPage: true,
    },
  },
  {
    path: '/movies',
    name: 'Movies',
    component: () => import('~/pages/Movies.vue'),
    meta: {
      isAuthPage: true,
    },
  },
  {
    path: '/tv-shows',
    name: 'TVShows',
    component: () => import('~/pages/TVShows.vue'),
    meta: {
      isAuthPage: true,
    },
  },
]

需要自动生成对应的联合类型：

type Pages = 'Main' | 'Auth' | 'Movies' | 'TVShows'

实现方案 #

可以借助TypeScript的类型推导能力，通过以下方式实现：

推荐方案（保留类型校验+准确字面量类型） #

修改路由数组定义，使用as const satisfies断言，既保留路由结构的类型校验，又让TypeScript锁定每个路由项的字面量类型：

import type { RouteRecordRaw } from 'vue-router';

export const routes = [
  {
    path: '/',
    name: 'Main',
    component: () => import('~/pages/Main.vue'),
    children: [],
  },
  {
    path: '/auth',
    name: 'Auth',
    component: () => import('~/pages/Auth.vue'),
    meta: {
      isAuthPage: true,
    },
  },
  {
    path: '/movies',
    name: 'Movies',
    component: () => import('~/pages/Movies.vue'),
    meta: {
      isAuthPage: true,
    },
  },
  {
    path: '/tv-shows',
    name: 'TVShows',
    component: () => import('~/pages/TVShows.vue'),
    meta: {
      isAuthPage: true,
    },
  },
] as const satisfies RouteRecordRaw[];

// 自动生成Pages联合类型
type Pages = (typeof routes)[number]['name'];

关键说明

• as const：强制TypeScript将数组和对象的类型解析为字面量类型，而非宽泛的string/object，这样才能提取到每个name的具体值
• satisfies RouteRecordRaw[]：确保路由数组的结构完全符合RouteRecordRaw类型要求，避免因as const丢失类型校验
• (typeof routes)[number]['name']：先取路由数组的类型，再提取数组中任意元素的类型，最后取出该元素的name属性类型，自动组合成联合类型

兼容原路由定义的方案 #

如果不想修改原路由数组的写法，可直接基于现有路由的类型推导，但需注意：若RouteRecordRaw中name的类型是string，则推导结果会是string而非具体的字面量联合类型：

export const routes: RouteRecordRaw[] = [
  // 原路由代码不变
];

// 生成类型
type Pages = (typeof routes)[number]['name'];

内容的提问来源于stack exchange，提问作者Slava