Vue中如何传递新查询参数到URL并重载当前页面？

以下是几种无需依赖router-view的key属性即可实现页面（或组件）重载/数据刷新的方法：

方法1：监听路由query变化，手动触发数据更新 #

在当前组件中监听路由query参数的变化，当关键参数（lat/lng）改变时，重新执行数据获取逻辑，或者强制组件更新。

created() {
  this.$watch(
    () => this.$route.query,
    (newQuery, oldQuery) => {
      // 仅在目标参数变化时执行刷新逻辑
      if (newQuery.lat !== oldQuery.lat || newQuery.lng !== oldQuery.lng) {
        // 调用你的数据获取方法，传入新参数
        this.loadSearchResults(newQuery.lat, newQuery.lng);
        // 如果需要强制组件重新渲染，可使用：
        // this.$forceUpdate();
      }
    },
    { deep: true }
  );
}

方法2：更新参数后强制整页刷新 #

如果不需要考虑页面闪烁的体验问题，可以直接在更新路由参数后调用页面刷新API。修改你的redirect方法：

redirect({ lat, lng }) {
  const currentRoute = this.$router.currentRoute;
  if (currentRoute.name === 'test-route') {
    // 先替换当前路由的查询参数
    this.$router.replace({ name: 'test-route', query: { lat, lng }});
    // 触发页面刷新
    window.location.reload();
  } else {
    this.$router.push({ name: 'test-route', query: { lat, lng }});
  }
}

方法3：给组件绑定动态key触发重建 #

在组件的根元素上绑定一个由query参数组合而成的key，当参数变化时，key值改变会触发组件的销毁与重建，达到重载效果。

<template>
  <div :key="`${$route.query.lat}-${$route.query.lng}`">
    <!-- 你的组件内容 -->
  </div>
</template>

各方法优缺点对比 #

• 方法1：体验最佳，无页面刷新，仅更新必要数据，适合绝大多数场景
• 方法2：实现最简单，但会有页面闪烁，用户体验较差
• 方法3：通过组件重建重置状态，适合需要完全清空组件内部状态的场景

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