Router v4 (Vue 3) 中的多个嵌套重定向

Question

沮丧的说明：如果投反对票，请解释你的理由，以便我可以改进问题。默默地投反对票对任何人都没有帮助。

我正在从

vue2

迁移到

vue3

，当从

Router v3

切换到

Router v4

时，我的路线重定向停止按预期工作，在深入研究文档后我不知道如何修复它。

这是一个例子。

使用下面的路由器，起始网址为

http://localhost:8080/app

，但为了简短起见，我将省略

http://localhost:8080

：

路由器 v3 行为（预期）：

• /app

  -> 重定向至

  /app/dashboard

• /app/dashboard

  -> 重定向至

  /app/dashboard/list

因此，输入

/app

后，用户最终会到达

/app/dashboard/list

，这是预期的

路由器 v4 行为（不正确）：

• /app

  -> 重定向至

  /dashboard/list

• 然后找不到，因为我的应用程序中没有这样的路线

我不确定这里发生了什么，因为我无法在文档中找到任何提及此类更改或如何修复它的内容。看起来它采用最终的重定向路由并更改完整路径，而不是仅更改其级别的路径组件，但这只是我的猜测。

问题：

如何使 Router v4 尊重所有中间重定向并使其仅更改路径的预期部分，而不是整个路径？

这是我的路由器设置：

let routerOptions = {
    history: createWebHistory(),
    routes: [

        {
            path: '/app',
            name: 'AppMain',
            component: MainLayout,
            redirect:'/app/dashboard',
            children: [
                {
                    path: 'dashboard',
                    component: DashboardMainPage,
                    redirect: 'dashboard/list',
                    children: [
                        {
                            path: 'list',
                            name: 'DashboardListRoute',
                            component: DashboardListPage,
                        },
                        {
                            path: 'calendar',
                            name: 'DashboardCalendarRoute',
                            component: DashboardCalendarPage,
                        },

                    ]
                },
            ]
        },
    ],

}

let router = createRouter(routerOptions)

Answer 1

您可以尝试：

let routerOptions = {
    history: createWebHistory(),
    routes: [
        {
            path: '/app',
            name: 'AppMain',
            component: MainLayout,
            redirect: '/app/dashboard',
            children: [
                {
                    path: 'dashboard',
                    component: DashboardMainPage,
                    redirect: '../dashboard/list',
                    children: [
                        {
                            path: 'list',
                            name: 'DashboardListRoute',
                            component: DashboardListPage,
                        },
                        {
                            path: 'calendar',
                            name: 'DashboardCalendarRoute',
                            component: DashboardCalendarPage,
                        },
                    ]
                },
            ]
        },
    ],
}

let router = createRouter(routerOptions);

如果这符合你的问题，我稍后会添加解释。