Vue中如何通过用户ID打开新空白页并配置支付路由

我已经实现了从Laravel后端获取数据并传递到Vue前端，把数据渲染成记录表格。现在希望点击表格里的“make payment”按钮，跳转到指定页面并携带用户ID，以此展示该用户的详情数据。之前尝试用router-push但不知道怎么正确实现，以下是我的代码：

<template> 
  <v-data-table hide-actions flat :headers="headers" :items="doctors" :pagination.sync="pagination" :rows-per-page-items="pagination.rowsPerPageItems" :total-items="pagination.totalItems"> 
    <template v-slot:items="props"> 
      <td>{{ props.index + 1 }}</td> 
      <td>{{ props.item.full_name }}</td> 
      <td>{{ props.item.email }}</td> 
      <td>{{ 'Doctor' }}</td> 
      <td><button class="disabled btn btn-success">amount</button></td> 
      <td> 
        <v-btn outline small color="indigo" @click="view(props.item)"> 
          <i class="fa fa-eye"></i> &nbsp; make payment 
        </v-btn> 
      </td> 
    </template> 
    <template v-slot:no-results> 
      <h6 class="grey--text">No data available</h6> 
    </template> 
  </v-data-table> 
  <div class="text-center"> 
    <v-pagination v-model="page" :length="4" circle > 
    </v-pagination> 
  </div> 
</div> 
</template> 

<script> 
import {mapActions, mapGetters} from "vuex"; 
export default { 
  data() { 
    return { 
      page: 1, 
      dateFormat: "DD MMM, YYYY", 
      selected: null, 
      dialog: false, 
      loading: false, 
      saveLoader: false, 
      pagination: { 
        descending: true, 
        page: 1, 
        rowsPerPage: 10, 
        sortBy: 'fat', 
        totalItems: 0, 
        rowsPerPageItems: [1, 2, 4, 8, 16] 
      }, 
      headers: [ 
        {text: "#", value: ""}, 
        {text: "name", value: "name"}, 
        {text: "email", value: "email"}, 
        {text: "role", value: "role"}, 
        {text: "updated_at", value: "updated_at"}, 
        {text: "Action", value: "action"}, 
      ], 
    }; 
  }, 
  computed: { 
    ...mapGetters({ 
      doctors: "getListDoctors", 
    }), 
  }, 
  methods: { 
    ...mapActions({ fetchDoctors: 'setListDoctors' }), 
    view() { 
      console.log(this.doctors) 
      // window.open(`/finance/pay-doctors/${item.id}`, "_blank"); 
    }, 
  }, 
  async mounted() { 
    await this.fetchDoctors(); 
  }, 
} 
</script>

解决方法 #

1. 先确认路由配置
   确保你的Vue Router已经配置了带ID参数的目标路由，示例如下：

   // router/index.js
   const routes = [
     // ...其他路由
     {
       path: '/finance/pay-doctors/:id',
       name: 'PayDoctor', // 命名路由方便后续调用
       component: () => import('../views/PayDoctor.vue') // 替换成你的详情页组件路径
     }
   ]
   

2. 修正view方法
   你的view方法目前没有接收点击时传入的医生数据，直接修改方法实现跳转：

   • 若要在当前页面跳转：

     view(item) {
       // 方式1：直接拼接路径
       this.$router.push(`/finance/pay-doctors/${item.id}`)
       // 方式2：用命名路由（更规范，路径变化时无需修改多处）
       // this.$router.push({ name: 'PayDoctor', params: { id: item.id } })
     }
     

   • 若要在新窗口打开页面：

     view(item) {
       const routeUrl = this.$router.resolve({
         name: 'PayDoctor',
         params: { id: item.id }
       })
       window.open(routeUrl.href, '_blank')
     }
     

3. 验证效果
   点击表格中的“make payment”按钮，就能携带对应医生的ID跳转到指定页面，在详情页可以通过this.$route.params.id获取到传递的ID，进而请求该医生的详情数据。

内容的提问来源于stack exchange，提问作者penina kinanu