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

Question

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

产品的示例 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>

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

嘿 :)) 首先你必须添加一个 unique 属性到你的产品列表，比如 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 属性

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

以上路线return您在可用产品状态下的第一个产品

第 5 步：

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

name: Product

并像这样用单引号引起来：

name: 'Product'

并像这样更改您的 router-link :

<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 中的参数，则需要确保 id 是唯一的 URL-valid 字符串。它看起来像这样：

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

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

Dynamic Name Routing / Dynamic Route Matching in VueJS

routes

image

hyperlink

vue.js

dynamic-routing

Router/Index.js

第 1 步：

第 2 步：

第 3 步：

第 4 步：

第 5 步：

Router/Index.js