Question

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

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

有没有办法登录仍然可以访问自从我运行http://localhost:8080/form/c101-101时传递的：id参数，它直接重定向到Login组件，当我尝试记录这个。$ route.params.id里面登录组件未定义。有没有办法可以传递：重定向的ID？

Answer 1

对于仍需解决此问题的用户，您可以使用动态重定向功能as per the Vue docs。

在此示例中，使用参数（yourdomain.com/:userId）作为查询字符串（:userId），以获取参数（例如yourdomain.com/user/profile?user=:userId）并重定向到另一个URL：

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}
         ]
     });

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

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

2 个答案: