在Nuxt中使用pushState时，如何实现正常的前进后退功能？

优先推荐：使用Nuxt路由API替代原生pushState #

直接借助Nuxt内置的vue-router能力，完全不需要手动处理历史记录和popstate事件，这是最稳妥的方式：

1. 用useRouter()获取路由实例，调用push方法修改URL：

const router = useRouter();
// 方式1：传递完整路径字符串
router.push(response.filter?.filterUrl);
// 方式2：传递路由对象（更灵活，便于后续监听参数变化）
router.push({ query: { category: 'xxx', price: 'yyy' } });

2. 监听路由参数变化自动加载数据：
   通过useRoute()获取当前路由，监听query或params的变化来调用getData()，无需手动监听popstate：

const route = useRoute();
watch(() => route.query, () => {
  getData();
}, { immediate: true }); // immediate: true 确保页面初始化时也执行一次

这种方式下，浏览器的前进、后退按钮会自动触发路由变化，Nuxt会维护历史记录，完全和router.push的表现一致。

必须使用原生pushState时的处理方案 #

如果因为业务限制必须用原生history.pushState，需要同步Nuxt路由状态，避免页面刷新：

1. 修改pushState调用，存入必要状态：
   不要传null作为第一个参数，把后续需要的过滤参数存入state，方便前进后退时获取：

// 把过滤参数存入state，替换成你的实际参数
const filterState = { filterParams: { category: 'xxx', price: 'yyy' } };
history.pushState(filterState, document.title, response.filter?.filterUrl);

2. 正确监听popstate事件并同步路由：
   监听事件时要同步Nuxt的路由状态，同时移除监听避免内存泄漏：

onMounted(() => {
  const handlePopState = (e) => {
    // 如果有之前存入的状态
    if (e.state) {
      const router = useRouter();
      // 同步路由query，让Nuxt感知到URL变化，避免页面刷新
      router.replace({ query: e.state.filterParams });
      // 加载对应数据
      getData();
    }
  };

  window.addEventListener('popstate', handlePopState);

  // 组件销毁时移除监听
  onUnmounted(() => {
    window.removeEventListener('popstate', handlePopState);
  });
});

为什么之前的方案只生效一次？ #

你之前的代码只调用了getData()但没有同步Nuxt路由状态，当第二次触发popstate时，Nuxt会发现URL和当前路由状态不一致，从而触发页面刷新，导致逻辑失效。

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