vue router v4 中的重定向

Question

我正在从

Vue Router v3

迁移到

Vue Router v4

，并遇到了一个意想不到的问题，它破坏了我的应用程序中的很多逻辑 - 也许有人遇到过它并且知道一个好的解决方案。

在

Vue Router v3

中，我依靠“链式重定向”来设置默认位置，每个孩子在其中确定重定向的位置和方式。

例如：

/

->

/1

->

/1/2

->

/1/2/3

无论用户在这个链中从哪里开始，他们的默认起始位置都是

/1/2/3

（这是我的目标行为）

[

        {
            path: '/',
            redirect: '/1',
        },
        {
            path: '/1',
            component: DashboardListPage,
            children: [
                {
                    path: '',
                    redirect: '2',
                },
                {
                    path: '2',
                    component: DashboardMainPage,
                    children: [
                        {
                            path: '',
                            redirect: '3'
                        },
                        {
                            path: '3',
                            component: DashboardListPage,
                        },
                    ],
                },
            ],
        },
    ],

这曾经与

Vue Router v3

一起使用，但似乎不再与

Vue Router v4

一起使用

在

Vue Router v4

中它只是执行以下操作（不是我需要的）：

• /

  ->

  /2

  （不知道为什么

  /2

  ）

• /1

  ->

  /2

• /1/2

  ->

  /3

在所有情况下我都希望它重定向到

/1/2/3

Vue Router v4

中是否有我遗漏的设置？ 非常感谢任何有关如何实现重定向行为的提示。

Answer 1

在 Vue Router 4 中我发现以下路由器路径模式解决了嵌套重定向

const routes = [
   {
     path: '/',
     redirect: '/a'
   },
   {
   path: '/a',
   component: ParentView,
   children: [
     {
      path: '',
      redirect: '/a/b'
    },
    {
      path: 'b',
      component: ChildView,
      children: [
       {
         path: '',
         redirect: '/a/b/c'
       },
       {
         path: 'c',
         component: GrandChildView
       }
     ]
  }
]

} ]

Answer 2

根据路由器成员在github上对类似问题的回复：

此更改确实是有意为之：始终解析相对路径 基于当前位置以避免相对方式不一致 网址有效。在你的情况下，第一个重定向是绝对的，它有效， 第二个是相对的，它解析为您没有的路线，然后 它停止了。我建议您执行以下操作之一：

1. 在重定向中使用绝对路径
2. 使用命名路由来实现确定性 路线位置
3. 删除应用程序中使用任何 有重定向的路由

迁移指南中忽略了这一点。