Vue3同页面不同查询参数下Axios请求失效问题求助

问题核心是：当路由查询参数变化但组件未重新渲染时，created钩子只会在组件初始化时执行一次，不会再次触发getData方法。以下是具体解决方案：

方案1：监听路由查询参数变化 #

通过Vue的watch属性监听$route.query.subcategory_id的变化，每次参数更新时重新调用getData：

<script>
export default {
  data(){
    return {
      gridProducts : [],
      loading : false,
    }
  },
  created() {
    this.getData()
  },
  watch: {
    // 监听subcategory_id参数变化
    '$route.query.subcategory_id': {
      handler() {
        this.getData()
      },
      immediate: true // 确保初始化时也触发一次，可替代created里的调用
    }
  },
  methods:{
    getData() {
      this.loading = false; // 加载开始前重置状态
      let requestUrl = '/api/products';
      // 仅当参数存在时拼接查询字符串
      if (this.$route.query.subcategory_id) {
        requestUrl += `?subcategory_id=${this.$route.query.subcategory_id}`;
      }
      
      axios.get(requestUrl)
        .then((response) => {
          this.gridProducts = response.data.products;
        })
        .finally(() => {
          this.loading = true; // 请求完成后更新加载状态
        })
    }
  }
}
</script>

方案2：使用Vue Router的导航守卫 #

如果项目使用Vue Router，可以通过beforeRouteUpdate守卫在路由更新时触发数据请求：

<script>
export default {
  data(){
    return {
      gridProducts : [],
      loading : false,
    }
  },
  created() {
    this.getData()
  },
  beforeRouteUpdate(to, from, next) {
    // 路由更新时重新获取数据
    this.getData();
    next(); // 必须调用next()继续路由导航
  },
  methods:{
    getData() {
      this.loading = false;
      let requestUrl = '/api/products';
      if (to.query.subcategory_id) { // 直接使用to对象的参数
        requestUrl += `?subcategory_id=${to.query.subcategory_id}`;
      }
      
      axios.get(requestUrl)
        .then((response) => {
          this.gridProducts = response.data.products;
        })
        .finally(() => {
          this.loading = true;
        })
    }
  }
}
</script>

额外优化点 #

• 避免无效参数拼接：原代码中当subcategory_id不存在时会生成/api/products?subcategory_id=null，可能导致后端处理异常，建议仅在参数存在时拼接查询字符串。
• 修复加载状态逻辑：原代码仅在请求成功时设置loading=true，改用finally确保无论请求成功或失败都会更新状态。

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