Vue Router跳转后页面不刷新，添加重载代码仍无效该如何解决？

问题原因 #

Vue Router 基于单页应用（SPA）机制，当跳转的路由属于同一路由组件仅参数变化时，组件不会重新触发created/mounted钩子，因此数据不会自动更新。你之前用window.location.reload()无效，是因为router.push的异步特性，刷新操作可能在路由跳转完成前执行，而且整页刷新也违背了SPA的设计初衷。

可行解决方案 #

1. 监听路由参数变化 #

在目标页面组件中，通过watch监听$route的变化，参数更新时重新调用数据获取方法：

export default {
  data() {
    return {
      studentFee: null
    }
  },
  methods: {
    async fetchStudentFee() {
      // 根据当前路由参数获取数据
      const { uuid, id } = this.$route.params
      const res = await fetch(`/api/student/${uuid}/fee/${id}`)
      this.studentFee = await res.json()
    }
  },
  watch: {
    // 监听路由变化，触发数据刷新
    $route(to, from) {
      this.fetchStudentFee()
    }
  },
  // 组件初始化时先执行一次数据获取
  created() {
    this.fetchStudentFee()
  }
}

如果需要组件初始化时就触发监听逻辑，可以添加immediate: true：

watch: {
  $route: {
    handler(to, from) {
      this.fetchStudentFee()
    },
    immediate: true
  }
}

2. 给<router-view>添加唯一key #

在App.vue（或包含<router-view>的父组件）中，给<router-view>绑定key为$route.fullPath，这样每次路由（包括参数）变化时，都会强制重新渲染组件：

<template>
  <div id="app">
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

这种方式会触发组件的created/mounted钩子，相当于重新加载组件，适合需要完全重置组件状态的场景。

3. 移除无效的整页刷新逻辑 #

你之前的代码中，router.push的then回调里执行window.location.reload()是不合理的。直接移除该刷新操作，让路由正常跳转后，由目标组件通过上述两种方案自行处理数据更新即可。

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