Vue 3 和 Vue Router 中，使用 router.push 方法向同一个路由路径 (path) 推送带有不同查询参数 (query) 的路由对象

本文主要是介绍Vue 3 和 Vue Router 中，使用 router.push 方法向同一个路由路径 (path) 推送带有不同查询参数 (query) 的路由对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue 3 和 Vue Router 中，如果你尝试使用 router.push 方法向同一个路由路径 (path) 推送带有不同查询参数 (query) 的路由对象，Vue Router 默认不会触发组件的重新渲染，因为它认为你正在导航到相同的路由。这是因为 Vue Router 依赖路径 (path) 和路由参数 (params 在动态路由匹配中，而不是查询参数 query) 来判断路由是否改变。

然而，查询参数 (query) 的变化确实可以通过编程方式在组件内部检测到并作出反应。这里有几个方法可以实现你的需求：

方法 1: 使用 watch 监听查询参数

在你的组件内部，你可以使用 Vue 3 的 watch 或 watchEffect API 来监听 $route.query 的变化，并据此执行必要的逻辑。

<script setup>  
import { ref, watchEffect } from 'vue';  
import { useRoute } from 'vue-router';  const route = useRoute();  
const someData = ref(null);  watchEffect(() => {  if (route.query.id) {  // 假设 fetchData 是一个用于获取数据的函数  fetchData(route.query.id).then(data => {  someData.value = data;  });  }  
});  // 假设的 fetchData 函数  
function fetchData(id) {  // 示例代码，实际应替换为获取数据的逻辑  return new Promise(resolve => {  setTimeout(() => {  resolve({ id, name: `Evidence ${id}` });  }, 1000);  });  
}  
</script>

方法 2: 使用 key 强制重新渲染组件

虽然这不是直接监听查询参数变化的方法，但你可以通过在路由对象上添加一个 key 属性，并在每次查询参数变化时更新这个 key，来强制 Vue 重新渲染组件。这种方法比较取巧，但在某些情况下可能很有用。

// 假设在某个方法中执行跳转  
function navigateWithQuery(row) {  const queryKey = new Date().getTime(); // 生成一个唯一的时间戳作为 key  router.push({ path: '/home/evidence/evidencebank/myevidence', query: { id: row.id }, key: queryKey });  
}

但请注意，这种方法会导致整个组件的重新挂载，而不是仅仅更新数据，因此可能会带来不必要的性能开销。

方法 3: 使用 replace 而不是 push

如果你的需求是在不添加新历史记录的情况下改变查询参数，可以使用 router.replace 替代 router.push。但这并不会改变组件不重新渲染的问题，因此通常还是需要用到第一种方法。

结论

通常情况下，推荐使用第一种方法（使用 watch 或 watchEffect 监听查询参数变化），因为它既高效又能准确地处理查询参数的变化。

这篇关于Vue 3 和 Vue Router 中，使用 router.push 方法向同一个路由路径 (path) 推送带有不同查询参数 (query) 的路由对象的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---