Vue.js按钮点击URL变更但未跳转的解决方法及多点击事件实现

一、修复路由跳转不生效的问题 #

URL变化但页面无跳转，大多是因为目标路由对应的组件和当前组件为同一个，Vue Router默认不会重新渲染组件，导致页面内容未更新。可通过以下两种方式解决：

1. 监听路由变化触发组件更新 #

在当前组件的script中添加路由监听逻辑，根据新路由参数重新加载数据：

watch: {
  '$route' (to) {
    // 从新路由中取出参数，执行数据刷新
    this.loadFeeData(to.params.studentUuid, to.params.recordId)
  }
},
methods: {
  loadFeeData(studentUuid, recordId) {
    // 这里写获取缴费数据的业务逻辑，比如调用后端接口
  }
}

同时确保路由配置正确，示例如下：

// router/index.js
{
  path: '/student/:studentUuid/fee/:recordId',
  name: 'StudentFee',
  component: StudentFeeComponent
}

2. 给路由视图添加唯一Key #

在根组件的<router-view>上绑定:key="$route.fullPath"，强制Vue每次路由变化都重新渲染组件：

<router-view :key="$route.fullPath"></router-view>

二、绑定多个函数：先跳转再刷新页面 #

如果确实需要先完成路由跳转，再强制刷新页面，可通过自定义方法实现：

1. 定义方法统一处理逻辑 #

<template>
  <button 
    v-for="student_record in student.student_records" 
    class="dropdown-item custom-dropdown" 
    @click="handleJumpAndRefresh(student, student_record)"
  >
    {{ student_record.batch.course.name }} {{ trans('finance.fee_allocation') }}
  </button>
</template>

<script>
export default {
  methods: {
    handleJumpAndRefresh(student, studentRecord) {
      // 1. 执行路由跳转
      this.$router.push(`/student/${student.uuid}/fee/${studentRecord.id}`)
        .then(() => {
          // 2. 跳转成功后刷新页面
          window.location.reload()
        })
        .catch(err => console.error('路由跳转失败:', err))
    }
  }
}
</script>

2. 直接在@click中绑定多个函数（不推荐，可读性差） #

若不想自定义方法，也可直接在@click中用逗号分隔多个操作，但这种方式不利于后期维护：

<button 
  v-for="student_record in student.student_records" 
  class="dropdown-item custom-dropdown" 
  @click="$router.push('/student/'+student.uuid+'/fee/'+student_record.id), $nextTick(() => window.location.reload())"
>
  {{ student_record.batch.course.name }} {{ trans('finance.fee_allocation') }}
</button>

注意：强制刷新页面（window.location.reload()）会重新加载整个应用，可能降低用户体验，优先推荐第一种修复路由跳转的方案，仅在特殊场景下使用强制刷新。

内容的提问来源于stack exchange，提问作者Jacob K M