通过 vue-router 传递多个参数，其中一个在 URL 中使用

Question

我正在尝试将数据从一条路线传递到另一条路线。但是，我需要将 ID 和标题传递给子路由，并仅使用 URL 中的标题，而不使用 ID。我将使用 ID 来获取数据。我到处都读过，但我想不出解决我的问题的方法。

例子：

假设我们在名为“图书馆”的路线上，那里有不同的书籍。当点击其中一本书时，我想转到另一条路线，该路线将在 URL 中显示书名，并具有可用于数据获取的 ID。我怎样才能做到这一点？

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

<router-link :to="{path: '/Book/' + book.title}">

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

<router-link :to="{name: 'Book', params: {title: book.title}}">

我确信我在这里遗漏了一些东西，但我不完全确定是什么。

Answer 1

你可以使用props：

路由器/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

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  }
}

props: true您可以传递默认值，而不是在路由器定义中，即：

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

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