vue.js 中用于导航到动态路由的动态按钮答案

【问题标题】：dynamic button in vue.js for navigation to dynamic routevue.js 中用于导航到动态路由的动态按钮
【发布时间】：2021-06-18 23:33:41
【问题描述】：

我想通过单击按钮传递动态路由并获取单个用户信息，我正在使用 vuetify，所以我想知道如何在按钮中传递 userId，例如这是我的 URL :http://localhost:8080/users/userId 我可以从数据库中获取用户 ID，例如 if
userId = 3984EDeid9dnh3kd9i http://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 传递动态路由并获取单个用户信息

【问题讨论】：

标签： javascript html node.js vue.js vuetify.js

【解决方案1】：

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

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

或

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

【讨论】：

【解决方案2】：

您只需要在v-btn "to" props 中传递string 或object，它就会打开链接。

: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>

【讨论】：