0

我有一些产品正在被迭代和展示。我想使用产品的图像作为每个产品特定页面的链接。我希望每个产品页面都从同一个模板中提取，用适当的产品详细信息替换道具。

产品的示例 url 类似于：/shop/product/name-of-product

以下是相关代码：

<template>
    <div class="p-avaible" v-for="item in avaibleProducts" :key="item.name">
        <router-link :to={ name: 'avaibleProducts' , params: { id: 1 }}>
            <img :key="item.image" :src="item.image">
        </router-link>
        <div class="p-name">{{ item.name }}</div>
        <div class="p-price">€{{ item.price }}</div>
        <div class="btn-container">
            <button class="add-to-cart">ADD TO CART</button>
        </div>
    </div>
</template>


<script>
    export default {
      data() {
        return {
          cart: [],
          avaibleProducts: [
            {
              name: "PLASTIC BAGS 3-PACK v1",
              price: 0.33,
              image: require('@/assets/plastic-bag-pack.jpg'),
              description: 'First version plastic bags pack containing 3 HQ assets. Make sure to get yours today.',
              id: 1
            },
            {
              name: "VINYL TEXTURES 2-PACK v1",
              price: 0.22,
              image: require('@/assets/vinyl-texture-pack.jpg'),
              description: 'First version vinyl texture pack containing 2 HQ assets. Make sure to get yours today.',
              id: 2
            },
            {
              name: "STICKER PACK 6-PACK v1",
              price: 0.66,
              image: require('@/assets/sticker-bag-pack.jpg'),
              description: 'First version sticker bag pack containing 6 HQ assets. Make sure to get yours today.',
              id: 3
            }
          ],
        };
      }
    };
</script>

路由器/Index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Shop from '../views/Shop.vue'
import Product from '../views/Product'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/product/:id',
    name: Product,
    component: Product
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
4

2 回答 2

0

嘿 :)) 首先你必须在你的产品列表中添加一个独特的 属性，比如 uuid 或任何东西，你也可以使用id属性，但这不是一个好方法

第1步：

您必须将 uuid 属性添加到您的产品对象：

{
      name: 'PLASTIC BAGS 3-PACK v1',
      price: 0.33,
      image: require('@/assets/plastic-bag-pack.jpg'),
      description:
        'First version plastic bags pack containing 3 HQ assets. Make sure to get yours today.',
      id: 1,
      uuid: 'prd-001' // pay attention to this line 
    },

第2步：

您需要创建一个计算属性

computed: {
  showProduct() {
    const id = this.$route.params.id;
    const product = this.avaibleProducts.find((p) => p.uuid == id);
    return product;
  },

第 3 步：

在您的模板中，您可以像这样访问它：

<ul>
  <li>{{ showProduct.name }} - {{ showProduct.price }} <!-- and etc ... {{ showProduct.image }}  --></li>
</ul>

第4步：

您可以在此路线中加载单个产品：

/product/prd-001

上述路线以您的可用产品状态返回您的第一个产品

第 5 步：

更改Router/Index.js文件中的这一行

name: Product

并将其放在单引号中，如下所示：

name: 'Product'

并像这样更改您的路由器链接：

<router-link :to="{name: 'Product' , params:{ id: product.uuid }}">{{ product.name}}</router-link>

做得好！

于 2020-08-24T18:24:06.393 回答
0

您缺少路由器index.js文件中的一个重要部分。您需要在Product组件中启用道具传递

路由器/Index.js

{
  path: '/product/:id',
  name: Product,
  component: Product,
  props: true
}

现在，您实际上可以通过<router-link>元素将道具传递给您的路线。

现在您所要做的就是将适当的道具传递给组件。created()您可以通过在组件的挂钩上模拟 API 调用来做到这一点。

我建议您制作一个文件，将产品的所有详细信息JSON放在目录中的某个位置。src无需通过 webpack 导入图像，只需将图像放入public/images.

id然后，如果要将其用作您指定的 URL 中的参数，则需要确保它是唯一的 URL 有效字符串。它看起来像这样：

@/assets/json/productList.json：

[
    {
        "id": "plastic-bag",
        "name": "PLASTIC BAGS 3-PACK v1",
        "price": 0.33,
        "image": "/images/products/1.jpg",
        "description": "First version plastic bags pack containing 3 HQ assets. Make sure to get yours today."
    },
    ....
]

然后在您的Product.vue组件中：

<template>
  <div>
    <img :src="product.image" alt="">
    <h1>{{ product.name }}</h1>
    <pre>${{ product.price }} USD</pre>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
  import products from "@/assets/json/productList.json";

    export default {
      data() {
        return {
          product: null;
        };
      },
      created() {
        this.setProduct();
      },
      methods: {
        setProduct() {
          const currentProject = products.find(project => project.id === this.$route.params.id); // Find project via the route id param
          this.product = currentProject;
        }
      }
    };
</script>
于 2020-08-24T18:25:44.293 回答