如何在NuxtJS中正确读取查询参数？异步异常问题求助

问题核心在于$router.push是异步操作，你调用push后立刻执行getQueryParam时，路由还未完成更新，所以读取到的是旧的$route.query值——这就是首次返回null、第二次返回上一次参数的原因。之前给getQueryParam加async/await没用，因为$route.query本身不是Promise，await根本起不到等待路由更新的作用。

解决方法1：等待$router.push完成后再读取参数 #

$router.push会返回一个Promise，我们可以用async/await或者then方法等待跳转完成，再执行参数读取逻辑：

methods: {
  getQueryParam() {
    const q = this.$route.query.q ?? null;
    console.log(q);
  },

  // async/await写法
  async onSearchClick(event, searchTerm) {
    await this.$router.push(`/my-url?q=${searchTerm}`);
    this.getQueryParam();
  },

  // 或者then写法
  // onSearchClick(event, searchTerm) {
  //   this.$router.push(`/my-url?q=${searchTerm}`).then(() => {
  //     this.getQueryParam();
  //   });
  // }
}

解决方法2：监听路由参数变化 #

如果需要在参数变化时自动触发逻辑，可以用Vue的watch监听$route.query：

watch: {
  '$route.query.q'(newQ) {
    const q = newQ ?? null;
    console.log(q);
    // 这里可添加你的业务逻辑
  }
},

methods: {
  onSearchClick(event, searchTerm) {
    this.$router.push(`/my-url?q=${searchTerm}`);
  }
}

解决方法3：在目标页面的生命周期钩子中处理 #

如果/my-url是单独的页面组件，更推荐在目标页面的生命周期钩子（比如asyncData、mounted）里直接获取参数，这更符合Nuxt的开发习惯：

// /pages/my-url.vue
export default {
  // 服务端/客户端都能执行的asyncData
  asyncData({ route }) {
    const q = route.query.q ?? null;
    console.log(q);
    return { q }; // 将参数注入组件data
  },

  // 或者客户端mounted钩子处理
  mounted() {
    const q = this.$route.query.q ?? null;
    console.log(q);
  }
}

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