如何强制Vue Router执行多次重定向？解决编程式导航重定向报错

问题根源 #

当你通过push编程式导航到/form时，Vue Router正处于处理该导航的周期中，此时组件内部立即调用$router.replace发起新导航，会触发路由导航冲突，导致报错。

可行解决方案 #

方案1：路由层面配置重定向（推荐）

直接在路由规则中新增不带step的路由，通过重定向处理默认step，完全避免组件内的导航操作：

const routes = [
  {
    path: '/form',
    redirect: (to) => {
      // 这里写入你的step计算规则，示例默认返回step-1
      const targetStep = 'step-1';
      return { path: `/form/${targetStep}` };
    }
  },
  {
    path: '/form/:step',
    component: FormView // 你的表单视图组件
  }
];

方案2：组件内延迟执行replace

利用$nextTick或setTimeout将replace操作推迟到当前导航完成后执行：

// 组件的mounted或created钩子中
mounted() {
  this.$nextTick(() => {
    // 写入你的step计算逻辑
    const step = this.getTargetStep();
    this.$router.replace({ params: { step } });
  });
}

或使用setTimeout（0延迟即可，将操作放入事件循环下一轮）：

mounted() {
  setTimeout(() => {
    const step = this.getTargetStep();
    this.$router.replace({ params: { step } });
  }, 0);
}

方案3：使用路由守卫处理

通过全局前置守卫或路由独享守卫在导航阶段完成重定向：

router.beforeEach((to, from, next) => {
  if (to.path === '/form' && !to.params.step) {
    const targetStep = 'step-1'; // 替换为你的step计算规则
    next({ path: `/form/${targetStep}` });
  } else {
    next();
  }
});

内容的提问来源于stack exchange，提问作者T. Antunes