Vue3 Router v4嵌套重定向异常问题及解决咨询

从Vue2迁移到Vue3，将Router v3升级到v4后出现多级重定向异常：

• Router v3预期行为：访问/app会依次重定向到/app/dashboard，再跳转至/app/dashboard/list，最终正常加载页面
• Router v4异常行为：访问/app直接跳转到/dashboard/list，因无对应路由触发页面未找到

问题原因 #

Router v4对路由重定向的路径解析逻辑做了调整：子路由中直接使用字符串形式的路径（如'dashboard/list'）会被当作根路径下的绝对路径处理，而v3中会自动拼接父路由的路径前缀。你当前的子路由配置里，dashboard路由的redirect: 'dashboard/list'被解析成了根路径下的/dashboard/list，而非预期的/app/dashboard/list。

解决方案 #

方案1：使用相对路径重定向

修改子路由的redirect为相对当前父路由的路径，父路由path已经是dashboard，当前路径为/app/dashboard，直接重定向到list即可：

let routerOptions = {
    history: createWebHistory(),
    routes: [
        {
            path: '/app',
            name: 'AppMain',
            component: MainLayout,
            redirect: '/app/dashboard',
            children: [
                {
                    path: 'dashboard',
                    component: DashboardMainPage,
                    redirect: 'list', // 修改为相对父路由的路径
                    children: [
                        {
                            path: 'list',
                            name: 'DashboardListRoute',
                            component: DashboardListPage,
                        },
                        {
                            path: 'calendar',
                            name: 'DashboardCalendarRoute',
                            component: DashboardCalendarPage,
                        },
                    ]
                },
            ]
        },
    ],
}

let router = createRouter(routerOptions)

也可以用./list明确标识相对当前路径，效果一致但可读性更强。

方案2：使用命名路由重定向（更推荐）

直接通过路由名称进行重定向，完全避免路径拼接问题，适配性更强，后续路由路径调整也无需修改重定向配置：

let routerOptions = {
    history: createWebHistory(),
    routes: [
        {
            path: '/app',
            name: 'AppMain',
            component: MainLayout,
            redirect: { name: 'DashboardMainRoute' },
            children: [
                {
                    path: 'dashboard',
                    name: 'DashboardMainRoute', // 给父级子路由添加命名
                    component: DashboardMainPage,
                    redirect: { name: 'DashboardListRoute' }, // 直接跳转到目标子路由的名称
                    children: [
                        {
                            path: 'list',
                            name: 'DashboardListRoute',
                            component: DashboardListPage,
                        },
                        {
                            path: 'calendar',
                            name: 'DashboardCalendarRoute',
                            component: DashboardCalendarPage,
                        },
                    ]
                },
            ]
        },
    ],
}

let router = createRouter(routerOptions)

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