Vue页面跳转时如何传递点击的导师ID至目标页面？

下面针对你的Vue项目场景，提供三种常用的参数传递方式，按需选择：

方案1：路由查询参数（Query Params） #

直接通过路由的查询参数传递ID，无需修改路由配置，适合简单场景：

修改按钮代码 #

将v-btn的to属性改为动态绑定，携带mentorId参数：

<v-btn
  class="mb-3 mt-3"
  color="green"
  :to="{ 
    path: '/companyApplicants/menteeListPage', 
    query: { mentorId: user.ID } 
  }"
>
  <v-icon>mdi-clipboard-account</v-icon>
</v-btn>

目标页面接收参数 #

在/companyApplicants/menteeListPage页面的组件中，通过$route获取参数：

// 在目标页面的script中
mounted() {
  const mentorId = this.$route.query.mentorId;
  console.log('接收的导师ID：', mentorId);
  // 后续可根据ID请求对应数据
}

方案2：路由动态参数（Route Params） #

如果希望ID出现在URL路径中（如/companyApplicants/menteeListPage/123），需要先配置路由：

第一步：配置路由规则 #

在你的路由配置文件（通常是router/index.js）中，修改目标路由的路径：

{
  path: '/companyApplicants/menteeListPage/:mentorId', // 增加动态参数:mentorId
  name: 'MenteeListPage',
  component: () => import('@/views/MenteeListPage.vue') // 替换为你的组件路径
}

第二步：修改按钮跳转逻辑 #

将v-btn的to改为动态拼接路径：

<v-btn
  class="mb-3 mt-3"
  color="green"
  :to="`/companyApplicants/menteeListPage/${user.ID}`"
>
  <v-icon>mdi-clipboard-account</v-icon>
</v-btn>

目标页面接收参数 #

在目标页面组件中通过$route.params获取：

mounted() {
  const mentorId = this.$route.params.mentorId;
  console.log('接收的导师ID：', mentorId);
}

方案3：编程式导航（灵活控制跳转逻辑） #

如果需要在跳转前做额外逻辑（比如确认提示），可以用编程式导航替代to属性：

修改按钮和方法 #

移除v-btn的to属性，保留click事件：

<v-btn
  class="mb-3 mt-3"
  v-on:click="sendConfirm(user.ID)"
  color="green"
>
  <v-icon>mdi-clipboard-account</v-icon>
</v-btn>

在组件的methods中实现sendConfirm方法：

methods: {
  // 其他方法...
  sendConfirm(mentorId) {
    // 这里可以添加确认逻辑，比如弹框确认
    // if (confirm('确认查看该导师的学员列表？')) {
      this.$router.push({
        path: '/companyApplicants/menteeListPage',
        query: { mentorId: mentorId } // 也可以用params，对应方案2的路由配置
      });
    // }
  }
}

目标页面接收参数 #

同方案1或方案2，根据你选择的参数类型用$route.query或$route.params获取。

内容的提问来源于stack exchange，提问作者Semih Gür