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

Posted 2023-02-22

【中文标题】vue.js 中用于导航到动态路由的动态按钮

【英文标题】：dynamic button in vue.js for navigation to dynamic route

【发布时间】：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->
              <template slot="progress">
                <v-progress-linear
                  color="deep-purple"
                  
                  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-
                    :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 传递动态路由并获取单个用户信息

【参考方案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-
      :to=" name: 'users', params:  userId: user.id "
      >More
    </v-btn>