Question

我有一些正在迭代和显示的产品。我想将产品图片用作每个产品特定页面的链接。我希望每个产品页面都从相同的模板中提取，并用相应的产品详细信息替换道具。

产品的示例网址类似于：/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>

Router / 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

Answer 1

嘿:)）首先，您必须像uuid一样将唯一属性添加到产品列表中，也可以使用 id < / strong> 属性，但这不是一个好方法

步骤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 }} </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>

做得好！

Answer 2

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

Router / Index.js

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

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

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

我建议您制作一个JSON文件，并将其与产品的所有详细信息一起放在src目录中。无需通过webpack导入图像，只需将图像放入public/images即可静态完成。

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

[ { "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>组件中：

pointer-events: none;

VueJS中的动态名称路由/动态路由匹配

Router / Index.js

2 个答案:

步骤1：

步骤2：

步骤3：

步骤4：

步骤5：

Router / Index.js