Nuxt2：页面刷新时如何在fetch钩子中响应路由查询参数

问题根源 #

你当前的代码在fetch里直接用组件初始值构建新查询参数并推送路由，导致刷新页面时，服务器端渲染阶段的$route.query还未被正确读取就被覆盖，同时未利用Nuxt提供的fetch上下文参数来可靠获取路由信息。

修正方案 #

1. 同步路由参数到组件数据

在fetch钩子中先读取路由上的查询参数，同步到组件的data中，确保刷新时使用URL上的参数而非默认值。

2. 利用fetch上下文的route对象

Nuxt2组件的fetch钩子支持接收上下文参数，其中的route对象在服务器端和客户端都能可靠获取当前路由信息，比直接用this.$route更稳定。

3. 避免无限路由跳转

添加判断逻辑，仅当当前路由查询参数与要设置的参数不一致时，才执行路由跳转，防止循环触发fetch。

4. 服务器端与客户端路由处理区分

服务器端无法直接用$router.push，需用context.redirect来重定向到带正确参数的URL。

修改后的完整代码 #

async fetch({ route, redirect }) { // 接收Nuxt上下文参数
  this.triggerFilter = true;

  // 第一步：如果路由存在查询参数，同步到组件data
  if (Object.keys(route.query).length > 0) {
    this.pageSize = parseInt(route.query.limit) || this.pageSize;
    this.currentPage = parseInt(route.query.page) || this.currentPage;
    this.field = route.query.field || this.field;
    this.lang = route.query.lang || this.lang;
    this.range = route.query.cost || this.range;
  }

  // 构建查询参数对象
  const query = {
    limit: this.pageSize,
    page: this.currentPage,
    field: this.field,
    lang: this.lang,
    cost: this.range,
  };
  // 移除空值参数
  Object.keys(query).forEach(key => !query[key] && delete query[key]);

  // 判断当前路由参数是否与目标参数一致，避免重复跳转
  const isParamsMatch = Object.keys(query).every(key => route.query[key] == query[key]);
  if (!isParamsMatch) {
    if (process.client) {
      // 客户端用$router.push更新路由
      this.$router.push(this.localePath({ name: "all-slug", query }));
    } else {
      // 服务器端用redirect重定向
      redirect(this.localePath({ name: "all-slug", query }));
    }
  }

  this.sorted = true;
  // 用URLSearchParams构建查询字符串，自动处理编码
  const searchParams = new URLSearchParams(query);
  searchParams.append('locale', this.$i18n.locale);
  const queryString = searchParams.toString();

  // 发起请求
  await this.$store.dispatch(
    "myaction",
    `/api/ap${route.params.slug}?${queryString}`
  );
  this.triggerFilter = false;
}

额外优化点 #

• 使用URLSearchParams替代手动拼接查询字符串，避免编码错误，代码更简洁。
• 用Object.keys(query).forEach统一移除空值参数，替代多个if判断。

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