vue.js中的动态按钮，用于导航到动态路线

Question

我想通过动态路由并通过点击按钮获得单个用户信息，我正在使用vuetify，所以我想知道如何在按钮中传递userId，例如这是我的URL：http://localhost:8080/users/userId我可以从数据库中获取用户ID，例如，如果
userid=3984EDeid9dnh3kd9ihttp://localhost:8080/users/3984EDeid9dnh3kd9i但我不知道如何将其添加到按钮中

这是我的代码：

<v-container fluid>
<v-row class="my-0">
<v-col
v-for="(user, userId) in users"
:key="userId"
class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
>
<template>
<v-card hover :loading="loading" class="mx-auto" max-width="374">
<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>

<h4 text-right">
username :
<span class="font-weight-bold blue--text">
{{ user.userName}}
</span>
</h4>
<v-card-actions>
<v-col>
<v-btn
text
class="float-left"
style="text-decoration: none; color: inherit"
max-width="50px"
:to = HERE IS MY PROBLEM  <===================

>More
</v-btn>
</v-col>
</v-card-actions>
</v-card>
</template>
</v-col>
</v-row>
</v-container>
<script>
export default {
data() {
return {
//after using axios and get userId
userId : this.getId
};
},

所以我可以在循环中显示所有用户的userId，我只想知道如何使用：to通过动态路由并获得单个用户信息

Answer 1

尝试将id连接到路径，如下所示：

:to ="'/users/'+user.id"

或

:to ="`/users/${user.id}`"

Answer 2

您只需要在v-btn中传递字符串或对象即可"至"；道具，它会打开链接。

:to="{ name: 'users', params: { userId: userID }}"

代码示例：

<v-btn
text
class="float-left"
style="text-decoration: none; color: inherit"
max-width="50px"
:to="{ name: 'users', params: { userId: user.id }}"
>More
</v-btn>