Javascript 通过vue路由器传递多个参数，其中一个参数在URL中使用

我试图将数据从一条路径传递到另一条路径。但是，我需要将ID和标题传递给子路由，并且只使用URL中的标题，而不使用ID。我将使用ID获取数据。我到处都读过书，想不出解决问题的办法

例如：

假设我们在一条叫做图书馆的路线上，在那里我们有不同的书。当单击其中一本书时，我想转到另一个路径，该路径将在URL中显示图书标题，并使ID可用于数据获取。我该怎么做

我发现了如何进行动态URL匹配，我可以将其用于标题显示，但无法传递ID：

我还发现了如何使用命名路由传递参数，但如何在URL中使用标题

我肯定我在这里遗漏了什么，但我不完全确定是什么。

你可以使用道具：

路由器/index.js：

routes: [
  { path: '/Library/:title', name: 'Book', component: Book, props: true },
  ...
]

导航：

:to="{ name: 'Book', params: { title: book.title }, props: { id: book.id } }"

Book.vue

在路由器定义中，您可以传递默认值，即：

..., props: { id: '1' }

厌倦了在url中使用标题，它可能需要转义。我知道这对搜索引擎优化有好处，但ID更安全。

你可以使用道具：

路由器/index.js：

routes: [
  { path: '/Library/:title', name: 'Book', component: Book, props: true },
  ...
]

导航：

:to="{ name: 'Book', params: { title: book.title }, props: { id: book.id } }"

Book.vue

在路由器定义中，您可以传递默认值，即：

..., props: { id: '1' }

---

厌倦了在url中使用标题，它可能需要转义。我知道这对SEO有好处，但ID更安全。

谢谢您的回复。但是，我在Book.vue中发现一个错误-缺少必需的prop:id。它似乎没有将其传递给Book组件。我最终解决了它！除了在导航中，一切都与您所做的一样，我没有添加道具，而是将id包含在参数中，因此看起来是这样的：`:to={name:'Book'，params:{title:Book.title，id:Book.id}}`谢谢您的帮助@VBobby，它也应该与道具配合使用。您得到的错误意味着您的标记中有没有id的元素。您可以将id属性从必需更改为默认值：。但我想你不会想要没有身份证的。很高兴你解决了。谢谢你的回复。但是，我在Book.vue中发现一个错误-缺少必需的prop:id。它似乎没有将其传递给Book组件。我最终解决了它！除了在导航中，一切都与您所做的一样，我没有添加道具，而是将id包含在参数中，因此看起来是这样的：`:to={name:'Book'，params:{title:Book.title，id:Book.id}}`谢谢您的帮助@VBobby，它也应该与道具配合使用。您得到的错误意味着您的标记中有没有id的元素。您可以将id属性从必需更改为默认值：。但我想你不会想要一个没有身份证的。很高兴你解决了。