Vue项目中如何在产品详情页按ID展示对应产品数据？

我明白你现在的处境：三个组件里都存了相同的20个产品数组，跳转详情页后不知道怎么匹配ID显示对应内容。先给你一个快速能用的方案，再说说更省心的优化做法。

快速实现：在ProductDetail.vue中匹配路由ID与产品 #

1. 获取路由中的产品ID
   在Vue组件里，你可以通过$route.params拿到路由参数。假设你的详情页路由路径是/products/:id，那在ProductDetail.vue的脚本部分，先拿到这个ID并匹配对应产品：

<script>
export default {
  data() {
    return {
      products: [/* 你的20个产品数据 */],
      currentProduct: null
    }
  },
  mounted() {
    // 把路由参数转成数字（如果你的产品ID是数字类型）
    const productId = parseInt(this.$route.params.id)
    // 从数组里筛选出对应ID的产品
    this.currentProduct = this.products.find(product => product.id === productId)
  },
  // 处理路由参数变化的情况（比如从一个详情页直接跳转到另一个，不用刷新页面）
  watch: {
    '$route.params.id'(newId) {
      const productId = parseInt(newId)
      this.currentProduct = this.products.find(product => product.id === productId)
    }
  }
}
</script>

2. 在模板中渲染当前产品
   拿到currentProduct后，就可以在模板里展示它的信息了：

<template>
  <div class="product-detail" v-if="currentProduct">
    <h1>{{ currentProduct.name }}</h1>
    <p>{{ currentProduct.description }}</p>
    <!-- 其他需要展示的产品字段，比如价格、图片等 -->
  </div>
  <div v-else>
    <p>抱歉，未找到该产品</p>
  </div>
</template>

更优方案：统一管理产品数据（避免冗余） #

现在你三个组件都存了相同的products数组，不仅浪费资源，以后修改数据还要改三个地方，太麻烦。推荐把数据抽出来统一管理：

1. 创建单独的数据文件
   在项目里新建src/data/products.js文件，把产品数组放在这里：

export const products = [
  { id: 1, name: '产品1', description: '产品描述1', price: 99 },
  // 剩下19个产品数据
]

2. 在各组件中导入使用
   比如在Products.vue、ProductHome.vue、ProductDetail.vue里，都导入这个统一的数组：

import { products } from '@/data/products.js'

export default {
  data() {
    return {
      products: products
    }
  }
  // 其他组件逻辑
}

这样以后要修改产品信息，只需要改这一个文件就好，维护起来特别省心。

3. ProductDetail.vue中复用匹配逻辑
   和快速方案的逻辑一样，只是products数组现在是导入的，不用每个组件重复写：

import { products } from '@/data/products.js'

export default {
  data() {
    return {
      products: products,
      currentProduct: null
    }
  },
  mounted() {
    this.setCurrentProduct()
  },
  watch: {
    '$route.params.id'() {
      this.setCurrentProduct()
    }
  },
  methods: {
    setCurrentProduct() {
      const productId = parseInt(this.$route.params.id)
      this.currentProduct = this.products.find(p => p.id === productId)
    }
  }
}

最后别忘了确认你的路由配置是正确的，比如在router/index.js里：

import ProductDetail from '@/components/ProductDetail.vue'

const routes = [
  // 其他路由配置
  {
    path: '/products/:id',
    name: 'ProductDetail',
    component: ProductDetail
  }
]

这样处理完，就能正常根据ID展示对应产品的详情啦！

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