同一路由调用router.push()时beforeEnter导航守卫未触发的问题

问题根源 #

当你在搜索页再次执行router.push跳转到同一路由（仅参数question变化）时，Vue Router会复用已有的SearchView组件实例，不会重新触发beforeEnter守卫，也不会重新执行组件的生命周期钩子（如created、mounted），因此搜索结果无法更新。

解决方案 #

方案1：组件内监听路由参数变化（推荐） #

在SearchView组件中监听路由参数的变化，一旦参数更新就重新执行搜索逻辑，无需依赖beforeEnter：

// SearchView.vue 脚本部分
export default {
  watch: {
    '$route.params.question': {
      async handler(newQuestion) {
        // 更新store中的搜索词并重新获取结果
        await this.$store.commit('setQuestion', newQuestion)
        await this.$store.dispatch('fetchSearchResult')
      },
      immediate: true // 首次进入组件时也触发一次，确保初始化逻辑正常
    }
  }
}

之后可以移除路由配置中的beforeEnter，避免重复执行逻辑；如果保留，首次进入时beforeEnter和watch的immediate会先后执行，注意不要出现重复请求。

方案2：给router-view添加唯一key强制刷新组件 #

在全局的router-view（通常在App.vue中）添加基于路由全路径的key，这样每次路由参数变化时，key值改变，组件会被重新创建，从而触发beforeEnter：

<!-- App.vue 模板部分 -->
<router-view :key="$route.fullPath"></router-view>

这种方式会销毁旧组件并创建新组件实例，虽然能触发beforeEnter，但相比方案1会有额外的组件销毁/重建开销，适合需要完全重置组件状态的场景。

方案3：router.push时使用force参数（Vue Router 4+） #

如果使用的是Vue Router 4.x及以上版本，可以在push时传入force: true强制触发导航，即使是同一路由：

function search() {
  const searchTerm = '/search=' + encodeURI(term.value.value)
  router.push({ path: searchTerm, force: true })
}

这种方式会强制重新加载组件，类似页面刷新，体验上不如前两种方案优雅，仅作为备选。

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