我正在建立一个电子商务商店，并希望传递特定的项目对象以在其自己的页面上动态呈现产品。我在这样做时遇到了麻烦，只能将道具作为路由器中的参数传递。我希望能够将道具传递到另一个页面，就像将整个对象放在参数中一样。如果我将整个对象放在参数中，它会起作用，但是我的 URL 是不可取的。由于我没有直接从商店商品页面中调用组件，因此我不确定如何将道具传递到产品页面，我将如何实现这一点？
任何帮助是极大的赞赏。
路由器：
{
path: "/buy/:product",
name: "Buy",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "Buy" */ "../views/Buy.vue"),
props: true,
},
父组件：
<template>
<div>
<h1>Welcome To Our Shop</h1>
<div class="products">
<div v-for="product in products" v-bind:key="product.name">
<div>
<ShopItem v-bind:products="product" />
</div>
</div>
</div>
</div>
</template>
<script>
import ShopItem from "../components/Shop/ShopItem";
export default {
name: "Shop",
components: { ShopItem },
data() {
return {
products: [
{
name: "Basic Deck",
price: 7,
description:
"The Basic Deck includes 68 cards: 10 cards in each of six categories, three icon legend cards, five blank cards for developing your own backstory elements, and instructions.",
image: require("@/assets/Draeorc.png")
},
{
name: "Card Bundle",
price: 10,
description:
"The Card Bundle includes the Basic Deck, Technical Booster, Mystical Booster and instructions as a single self-printable PDF.",
image: require("@/assets/Twilight.png")
},
{
name: "Full Bundle with Box",
price: 12,
description:
"The Full Bundle includes the Basic Deck, Technical Booster, Mystical Booster, instructions and tuck box as a single self-printable PDF.",
image: require("@/assets/Orig_Godbringer.png")
},
{
name: "Technical Booster",
price: 2,
description:
"The Technical Booster includes 10 new cards that focus on sci-fi and hi-tech concepts. Also includes two blank cards for creating your own backstory elements.",
image: require("@/assets/Andrea_the_Sharp.png")
},
{
name: "Mystical Booster ",
price: 2,
description:
"The Mystical Booster includes 10 new cards that focus on magic and fantasy concepts. Also includes two blank cards for creating your own backstory elements.",
image: require("@/assets/Akmhenos_Courage.png")
}
]
};
}
};
</script>
店铺商品：
<template>
<div class="product-container">
<router-link :to="{ name: 'Buy', params: {product: products.name } }">
<div>
<h2>
{{ products.name }}
<span class="price">${{ products.price }}</span>
</h2>
<div class="card-container">
<img :src="products.image" alt="cards" />
</div>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: "ShopItem",
props: ["products"]
};
</script>
我想将产品动态传递给的页面：
<template>
<div>
<div>
<h1>{{product}}</h1>
<div class="item-flex">
<div class="card-wrapper">
<img class="card-img" src="../assets/pdf.png" alt="pdf cards" />
</div>
<div class="item-desc">
<h2></h2>
<h2 class="price">$7</h2>
<p>
</p>
</div>
</div>
<button @click="submit" id="checkout-button">Checkout</button>
</div>
</div>
</template>
<script>
</script>