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

【问题标题】：How to pass parameters on redirecting using Vue Router如何使用 Vue Router 传递重定向参数
【发布时间】：2018-04-20 04:48:52
【问题描述】：

我在这里有一个示例 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 时它是未定义。有没有办法可以在重定向时传递 :id？

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

对于那些仍然遇到这种情况的人，您可以使用动态重定向函数as per the Vue docs。

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

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

注意：此语法使用 ES6。

【讨论】：

当点击被触发时如何在函数中使用它？

【解决方案2】：

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

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

通过上面的 sn-p 代码，您将在登录组件中获得 this.$route.params.id。

【讨论】：

关于这种方法的一个警告：如果需要将 /feature 和 /feature/:id 作为单独的路由（这是列表和编辑页面的常用模式），使用 /feature/:id? 将取代/feature，所以在这种情况下它不是一个适用的解决方案。