Vue Router重定向时如何传递参数？登录组件获取表单ID问题

嘿，这个问题我之前处理过！你当前的重定向配置只是直接跳转到/login，没有把原路由里的:id参数传递过去，所以Login组件里this.$route.params.id自然是undefined。给你几个实用的解决方案：

方案一：通过查询参数传递ID #

修改路由的redirect为函数形式，利用路由的to对象获取原路由的id，并将其作为查询参数传递给登录页：

router = new VueRouter({
  routes: [
    {
      path: '/form/:id',
      redirect: to => {
        // to对象包含当前要访问的路由的所有信息
        return { path: '/login', query: { formId: to.params.id } }
      }
    },
    { path: '/login', name: 'Login', component: Login }
  ]
});

之后在Login组件中，就可以通过this.$route.query.formId获取到原来的ID值了。

方案二：通过动态路由参数传递ID #

如果你的业务场景适合，可以将ID作为登录路由的可选动态参数：

router = new VueRouter({
  routes: [
    {
      path: '/form/:id',
      redirect: to => `/login/${to.params.id}`
    },
    // 用?标记formId为可选参数，确保单独访问/login也能正常进入
    { path: '/login/:formId?', name: 'Login', component: Login }
  ]
});

此时在Login组件中，就能通过this.$route.params.formId获取到ID值。不过这种方式更适合登录页本身需要该参数的场景，否则用查询参数会更灵活。

额外优化：登录后跳转回原表单页 #

如果你的需求是用户登录后自动跳转到原来的表单页面，建议同时传递原路由的完整路径：

redirect: to => {
  return { 
    path: '/login', 
    query: { 
      formId: to.params.id,
      redirect: to.fullPath // 保存原路由的完整路径
    } 
  }
}

用户登录成功后，就可以通过this.$route.query.redirect直接跳转到对应的表单页面，提升用户体验。

为什么原方法不行？ #

你之前用的是静态重定向redirect: '/login'，Vue Router不会自动将原路由的参数携带过去，必须使用函数式的redirect，借助to对象手动获取并传递参数。

内容的提问来源于stack exchange，提问作者The Bassman