Vue.js同路由切换category._id时产品不更新的问题求助

问题核心：Vue Router在切换同路由不同参数时，会复用现有组件实例，因此mounted钩子只会在首次加载时执行一次，后续参数变化不会触发数据重新获取，导致产品列表不更新。

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

将数据获取逻辑抽离为独立方法，通过watch监听$route的变化，参数更新时重新调用数据获取方法。

修改后的组件脚本代码：

<script>
import axios from "axios";
export default {
  name: "Product",
  data() {
    return {
      category: {},
      categories: [],
      products: [],
      catID: []
    };
  },
  mounted() {
    this.fetchCategoryAndProducts();
  },
  watch: {
    // 监听路由参数变更
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.fetchCategoryAndProducts();
      }
    }
  },
  methods: {
    ...mapActions(["addProductToCart"]),
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    },
    // 抽离数据获取逻辑
    fetchCategoryAndProducts() {
      // 清空旧分类数据，避免显示残留内容
      this.category = {};
      
      // 获取当前分类详情
      axios.get(`http://localhost:5000/api/categories/${this.$route.params.id}`)
        .then(response => {
          this.category = response.data.category;
        })
        .catch(error => console.error(error));

      // 获取产品列表（若无需每次刷新，可改为缓存逻辑）
      axios.get(`http://localhost:5000/api/products`)
        .then(response => {
          this.products = response.data.products;
        })
        .catch(error => console.error(error));
    }
  },
  computed: {
    currentProducts() {
      if (!this.category._id) return this.products;
      return this.products.filter(item => item.category._id === this.category._id);
    }
  }
};
</script>

方案二：强制组件重新渲染 #

在路由视图容器（如App.vue中的<router-view>）添加key属性，强制Vue在路由参数变化时重新创建组件实例：

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

该方法实现简单，但会销毁并重建组件，若组件包含复杂状态或生命周期逻辑，可能带来性能开销，按需使用。

额外优化建议 #

• 产品列表可做缓存处理：首次加载后保存到全局状态或本地，后续切换分类仅更新分类信息，减少重复请求。
• 添加加载状态：在数据获取过程中显示加载动画，提升用户体验。

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