查询参数的更改不会刷新路由

// 更改查询参数
window.location.search = '?newParam=value';

// 手动刷新页面
window.location.reload();

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  useEffect(() => {
    // 监听查询参数变化并重新加载数据
    fetchData(location.search);
  }, [location.search]);

  const fetchData = async (query) => {
    // 根据查询参数获取数据
    const response = await fetch(`/api/data?${query}`);
    const data = await response.json();
    // 更新组件状态
    setData(data);
  };

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const data = ref(null);

    const fetchData = async (query) => {
      // 根据查询参数获取数据
      const response = await fetch(`/api/data?${query}`);
      data.value = await response.json();
    };

    watch(
      () => route.fullPath,
      (newQuery) => {
        fetchData(newQuery);
      }
    );

    return {
      data,
    };
  },
};
</script>

// 更改查询参数
const newQuery = '?newParam=value';
history.pushState({}, '', newQuery);

// 重新加载数据
fetchData(newQuery);