问题产生环境
有一个网上商城的项目,主要涉及商品列表页(组件),商品详情页(组件)
在商品列表页中
GoodsListItem.vue
业务逻辑:
展示商品的详情,点击商品时,跳转到商品详情页
<template>
<div class="goods-item" @click="itemClick">
<img v-lazy="product.cover_url" :alt="product.description">
<div class="goods-info">
<p>{
{
product.title }}</p>
<span class="price"><small>¥</small>{
{
product.price }}</span>
<span class="collect">{
{
product.collects_count }}</span>
</div>
</div>
</template>
<script>
import {
useRouter} from "vue-router";
export default {
name: "GoodsListItem",
props: {
product: Object,
default() {
return {
}
}
},
setup(props) {
const router = useRouter()
const itemClick = () => {
// console.log("跳转到详情:" + props.product.id);
router.push({
path: '/detail', query: {
id: props.product.id}})
}
return {
itemClick
}
}
}
</script>
详情页面Detail.vue
业务逻辑:
接收参数,查询详情数据,展示到页面
详情页中,有一个相关图书的tab选项卡,里面加载的是GoodsListItem.vue组件
当点击这个GoodsListItem.vue里面的商品时,又进入到详情页Detail.vue
<template>
<div>
<nav-bar>
<template v-slot:default