带参数的 Vue Router 动态段答案

【问题标题】：Vue Router dynamic segment with params带参数的 Vue Router 动态段
【发布时间】：2020-04-22 22:29:07
【问题描述】：

我正在尝试创建一个可以处理动态段并接受路由器道具（参数）的路由。像这样的：

{ path: '/peer:body?', name: 'peer', component: () => import('pages/peer.vue'), props: true }

并最终像这样推送一条路线：

this.$router.push({ path: '/peer/' + row.body, name: 'peer', params: { row: row } })

不幸的是，我只能使用使用pathas 路由属性的动态段或使用nameas 路由属性的参数，但不能同时使用。

【问题讨论】：

您的路线定义似乎很奇怪。您希望它与哪个 URL 完全匹配？此外，当使用对象语法时，params 只能与 name 一起使用，而不能与 path 一起使用（Vue 路由器文档现在似乎已损坏，所以我无法发布链接...）
@MichalLevý 类似于http://localhost:8080/peer/body-of-message。目的是让动态段和参数一起工作。

标签： javascript vue.js vue-router

【解决方案1】：

首先，正如您已经提到的，在为$router.push（或<router-link> 的to 属性）构造“位置描述符对象”时，您可以使用path 或name，不能同时使用两者（这样做没有意义）

其次，只有在使用name 时才能传递params（如here 所述 - 前两个代码示例之间的段落）。要克服这个问题，您可以使用 query 而不是 params 或构建整个 path，包括 URL 字符串中的参数。

这让我想到了答案中最重要的部分。似乎您正在尝试将复杂对象作为路由参数传递（并传递给目标组件道具）。虽然这在技术上是可行的，但它并不是一个好的做事方式。您在路径定义中没有放置此类参数内容的位置 - 它将与 push 或单击 <router-link> 一起使用，其中参数作为对象提供，但是当用户直接访问该 URL 时（通过复制和粘贴 URL例如），页面将被破坏，因为 prop 参数将丢失（因为它不能直接从 URL 中提取）。

所以我的建议是避免这种情况。将您的数据放入 Vuex 之类的东西中，而不是通过路由器传递整个对象，只传递某种可以包含在 URL 中的标识符，由路由器提取并作为道具传递给目标组件。然后你的目标组件应该获取Id 并使用它来查询 Vuex 以获取它需要的数据...

【讨论】：