Vue Router中router.getRoutes()返回路由顺序与定义不一致的问题

问题场景 #

我使用以下Vue Router配置：

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/home',
            name: 'Home',
            component: HomeView,
        },
        {
            path: '/dev',
            name: 'Dev',
            component: DevView,
        },
        {
            path: '/dev/components',
            name: 'Components',
            component: ComponentsView,
        },
    ],
});

调用router.getRoutes()获取路由时，返回顺序为：

DevComponents
Home
Dev

但我期望和定义顺序一致：

Home
Dev
DevComponents

修改/dev/components为/components后顺序恢复正常，推测和路由路径长度有关。需要这个顺序来生成动态侧边栏导航。

原因分析 #

Vue Router内部会对路由进行优先级排序，核心规则是路径更长的路由会被排在前面——这是为了确保子路由能优先匹配，避免父路由先拦截请求导致子路由无法命中。所以/dev/components（路径长度更长）会被排在/dev前面，导致getRoutes()返回的顺序和定义顺序不一致。

解决方案 #

方案1：直接使用原始路由数组 #

将路由定义抽成独立变量，侧边栏导航直接使用这个原始数组，而非getRoutes()的结果：

// 单独定义路由数组，保留原始顺序
const appRoutes = [
    {
        path: '/home',
        name: 'Home',
        component: HomeView,
    },
    {
        path: '/dev',
        name: 'Dev',
        component: DevView,
    },
    {
        path: '/dev/components',
        name: 'Components',
        component: ComponentsView,
    },
];

// 创建路由实例时传入该数组
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: appRoutes,
});

之后侧边栏组件直接使用appRoutes生成导航项，完全保持定义时的顺序。

方案2：添加自定义排序字段，手动排序 #

如果需要使用getRoutes()（比如包含动态添加的路由），可以给每个路由添加自定义排序标识，获取后手动排序：

const appRoutes = [
    {
        path: '/home',
        name: 'Home',
        component: HomeView,
        meta: { sortOrder: 1 } // 自定义排序序号
    },
    {
        path: '/dev',
        name: 'Dev',
        component: DevView,
        meta: { sortOrder: 2 }
    },
    {
        path: '/dev/components',
        name: 'Components',
        component: ComponentsView,
        meta: { sortOrder: 3 }
    },
];

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: appRoutes,
});

// 获取路由后按自定义字段排序
const sortedRoutes = router.getRoutes().sort((a, b) => a.meta.sortOrder - b.meta.sortOrder);

用sortedRoutes作为侧边栏的数据源即可。

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