Vue Router v4链式重定向问题求助：v3迁移后不符合预期

问题根源 #

Vue Router v4 对相对路径重定向的处理逻辑和v3完全不同。v3里子路由空路径的相对重定向（比如redirect: '2'）是基于父路由路径拼接的，但v4中，相对重定向是基于浏览器当前的URL路径计算的。链式跳转时，地址栏还没更新到父路由，子路由的重定向就已经执行，导致路径拼接出错，才会出现/直接跳/2这种异常结果。

解决方案 #

1. 直接用绝对路径重定向（最简单直接） #

把所有中间重定向都改成直接指向最终目标的绝对路径，彻底避免路径拼接的问题：

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

这样不管用户访问哪个中间路径，都会直接跳转到/1/2/3，完全符合预期。

2. 用函数式重定向（保留子路由的自主逻辑） #

如果不想直接写死绝对路径，需要子路由自己决定跳转目标，可以用函数式重定向，手动基于当前路由拼接正确路径：

[
  {
    path: '/',
    redirect: '/1',
  },
  {
    path: '/1',
    component: DashboardListPage,
    children: [
      {
        path: '',
        redirect: (to) => `${to.fullPath}/2`,
      },
      {
        path: '2',
        component: DashboardMainPage,
        children: [
          {
            path: '',
            redirect: (to) => `${to.fullPath}/3`
          },
          {
            path: '3',
            component: DashboardListPage,
          },
        ],
      },
    ],
  },
]

函数里的to.fullPath是当前访问的正确路径，基于它拼接子路径，就能保证链式跳转的正确性。

3. 全局守卫统一处理（批量管理中间路径） #

如果有很多中间路径需要处理，逐个改路由配置太麻烦，可以用全局前置守卫统一拦截：

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的原有路由配置 */]
});

router.beforeEach((to, from, next) => {
  // 列出所有需要重定向的中间路径
  const middlePaths = ['/', '/1', '/1/2'];
  if (middlePaths.includes(to.fullPath)) {
    next('/1/2/3');
  } else {
    next();
  }
});

这种方式不用修改原有路由结构，适合批量处理的场景。

测试效果 #

修改后，访问/、/1、/1/2都会正确跳转到/1/2/3。

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