Vue路由切换时Category组件API调用不触发问题求解

这个问题我做项目时也踩过坑！核心原因很简单：当你从/category/1跳转到/category/2时，Vue Router会复用现有的Category组件实例，而不是销毁重建——所以created这类只会在组件创建时执行一次的生命周期钩子，自然不会再次触发，API调用也就没机会重新执行了。

下面给你几个从优到简的解决方案，都是Vue生态里的标准做法：

方案一：监听路由参数变化（最推荐） #

把API请求逻辑抽成独立的方法，然后通过Vue的watch监听路由参数id的变化，一旦变化就重新调用请求方法。还可以加上immediate: true，让组件初始化时也自动执行一次，完美替代created里的代码：

watch: {
  '$route.params.id': {
    immediate: true, // 组件创建时立即执行一次
    async handler(newId) {
      await this.fetchCategory(newId);
    }
  }
},
methods: {
  async fetchCategory(id) {
    try {
      console.log(id);
      const response = await axios.get(`/api/category/getOne.php?id=${id}`, axiosConfig);
      this.category = [response.data.records[0].name];
      console.log(response.data.records[0].name);
    } catch (e) {
      this.errors.push(e);
      console.error('获取分类数据失败:', e);
    }
  }
}

这样不管是首次进入页面，还是切换不同的分类ID，都能自动触发API请求，逻辑也更集中。

方案二：使用路由守卫beforeRouteUpdate #

如果你的场景需要在路由参数变化前做一些前置处理（比如校验权限、保存当前页面状态），可以用Vue Router提供的beforeRouteUpdate钩子，它专门用于组件复用时的路由参数更新：

// 组件内的路由守卫
beforeRouteUpdate(async (to, from, next) => {
  // 先获取新分类的数据
  await this.fetchCategory(to.params.id);
  // 数据获取完成后，允许路由更新
  next();
}),
methods: {
  async fetchCategory(id) {
    // 和上面一样的请求逻辑
  }
},
async created() {
  // 首次进入页面时调用
  await this.fetchCategory(this.$route.params.id);
}

这个钩子的优势是可以控制路由是否继续跳转，比如如果请求失败，你可以选择留在当前页面或者跳转到错误页。

方案三：手动销毁重建组件（不推荐，仅作补充） #

如果你不想用监听或路由守卫，也可以通过给组件添加唯一的key来强制Vue销毁重建组件，比如在路由对应的组件标签上：

<router-view :key="$route.fullPath"></router-view>

这样每次路由变化（包括参数变化），Vue都会销毁旧组件并创建新的，created钩子也就会重新触发。不过这种方式会带来额外的性能开销，因为组件实例频繁重建，所以除非特殊情况，不推荐用这个方案。

总结一下，方案一和方案二都是Vue官方推荐的优雅解法，优先选方案一（简单直接），如果有路由相关的前置逻辑需求再选方案二。

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