我正在尝试创建一个既可以处理动态段又可以接受路由器 Prop (参数)的路由。像这样:
{ 路径:'/peer:body?', name: 'peer', component: () => import('pages/peer.vue'), props: true }
并最终推送这样一条路线:
this.$router.push({ path: '/peer/' + row.body, name: 'peer', params: { row: row } })
不幸的是，我只能使用使用 path 作为路由属性的动态段或使用 name 作为路由属性的参数，但不能同时使用。
最佳答案
首先，正如您已经提到的，在为 $router.push 构造“位置描述符对象”时(或 to 的 <router-link> Prop )，您可以使用 path或 name ，而不是同时(这样做没有意义)
其次，你可以通过params仅当您使用 name 时(如所述 here - 前两个代码示例之间的段落)。要克服这个问题，您可以使用 query而不是 params或构建整个 path将参数包含到 URL 字符串中。
这让我想到了答案中最重要的部分。似乎您正在尝试将复杂对象作为路由参数传递(并传递到目标组件 Prop 中)。虽然这在技术上是可行的，但这并不是一个好的做事方式。您在路径定义中没有地方可以放置此类参数的内容 - 它可以与 push 一起使用或点击 <router-link>其中参数作为对象提供，但当用户直接访问该 URL(例如通过复制和粘贴 URL)时，页面将被破坏，因为 prop 参数将丢失(因为它不能直接从 URL 中提取)。
所以我的建议是避免这种情况。将你的数据放入 Vuex 之类的东西中，而不是通过路由器传递整个对象，只传递某种可以包含在 URL 中的标识符，由路由器提取并作为 Prop 传递到目标组件中。然后你的目标组件应该捕获 Id并使用它来查询 Vuex 以获取它需要的数据...
关于javascript - 带参数的 Vue Router 动态段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59594145/