使用router-link在vuejs中使用params进行路由

Question

我正在尝试使用vuejs构建一个spa,其中我有一个用户列表,当我点击一个用户时它应该路由到一个新页面,其中包含特定用户的用户详细信息如何在router-link中对用户ID进行参数化

Answer 1

您可以使用路由器链接传递参数

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这里"name"键参数定义路由的名称,"params"键定义您需要使用该路由发送的参数.

如果您需要使用Route Path而不是Route name,您可以使用.

<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>

参考

Answer 2

看起来params: {...}不适用于非命名路由,所以为了实现这一点我必须像这样建立我的链接:

<router-link :to="'/view-customer/' + customer.ID">

Answer 3

使用ES6模板文字：

<router-link :to="`/books/${book.id}`"></router-link>

Answer 4

非命名路由的解决方案：

<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link>

导致/register?plan=private

来源：文档