如何使用 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。