如何在使用 Vue Router 进行重定向时传递参数

Question

我在这里有一个示例 Vue 路由器，它在访问具有特定 id 的表单之前首先处理登录：

router = new VueRouter({
             routes: [
                 {path: '/form/:id', redirect: '/login'},
                 {path: '/login', name: 'Login', component: Login}
             ]
         });

有没有办法登录仍然可以访问传递的 :id 参数，因为当我运行http://localhost:8080/form/c101-101 时，它直接重定向到登录组件，当我尝试记录 this.$route 时。登录组件中的 params.id 是undefined。有没有办法在重定向时传递 :id ？

Answer 1

对于那些仍然遇到此问题的人，您可以使用动态重定向功能， 根据 Vue 文档。

这是一个使用参数（例如yourdomain.com/:yourParam）并重定向到另一个 URL的示例，使用参数（yourParam）作为查询字符串（yourdomain.com/your/route?yourQueryString=:yourParam）：

redirect: to => ({
  name: "your-named-route",
  query: { yourQueryString: to.params.yourParam },
}),

注意：此语法使用 ES6。

Answer 2

您可以在登录路由中将 /:id 设为可选，如下所示：-

router = new VueRouter({
         routes: [
             {path: '/form/:id', redirect: '/login/:id'},
             {path: '/login/:id?', name: 'Login', component: Login}
         ]
     });

使用上面的代码片段，您将在登录组件中获得 this.$route.params.id 。