时间戳

首页 > 解决方案 > VueJS 中的动态名称路由/动态路由匹配

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

问题描述

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

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

标签： imagevue.jshyperlinkroutesdynamic-routing

解决方案

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

做得好！

推荐阅读