Vue Router中this.$router.push()跳转已打开页面不刷新的解决方法

问题原因 #

Vue-router在跳转同一路由组件时，会复用已实例化的组件，所以created、mounted这类生命周期钩子只会执行一次，路由参数变化时不会重新触发，导致无法重新发起API调用。

解决方案 #

1. 监听$route参数变化 #

在组件内添加watch监听路由变化，当参数更新时重新调用数据获取方法：

watch: {
  '$route': {
    immediate: true, // 初始化时也执行一次
    handler(to) {
      const query = to.params.query;
      if (!isNaN(Number(query)) && Number(query) >= 1) {
        this.pokemonId = query;
        this.fetchData();
      } else {
        this.pokemonName = query;
        this.fetchDataAlternative();
      }
      this.fetchNames();
      this.getColor();
    }
  }
}

添加后可以移除created和mounted里的重复逻辑，统一由watch处理数据加载。

2. 使用组件内导航守卫beforeRouteUpdate #

在组件中定义beforeRouteUpdate钩子，在路由更新但组件复用的时候触发：

beforeRouteUpdate(to, from, next) {
  const query = to.params.query;
  if (!isNaN(Number(query)) && Number(query) >= 1) {
    this.pokemonId = query;
    this.fetchData();
  } else {
    this.pokemonName = query;
    this.fetchDataAlternative();
  }
  this.fetchNames();
  this.getColor();
  next(); // 必须调用next()继续路由跳转流程
}

3. 强制组件重新渲染（给<router-view>加key） #

在父组件（比如App.vue）的<router-view>上绑定唯一key，使用路由的完整路径：

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

这样每次路由变化（即使是同组件），Vue都会销毁旧组件并创建新实例，created、mounted钩子会重新执行，自动触发API调用。不过这种方式会重建组件实例，可能带来轻微性能开销，适合简单场景。

代码优化提示 #

你当前代码里的if (this.$route.params >= 1)判断逻辑存在错误，this.$route.params是对象类型，直接和数字比较会导致逻辑失效，建议修改为：

const query = this.$route.params.query;
if (!isNaN(Number(query)) && Number(query) >= 1) {
  // 处理ID相关逻辑
} else {
  // 处理名称相关逻辑
}

内容的提问来源于stack exchange，提问作者Casper Veneman