1.建立详情路由组件

views/Detail/index.vue

<script setup>

import DetailHot from './components/DetailHot.vue'

import { getDetail } from '@/apis/detail'

import { onMounted, ref } from 'vue'

import { useRoute } from 'vue-router'

import { ElMessage } from 'element-plus'

import { useCartStore } from '@/stores/cartStore'

const cartStore = useCartStore()

const goods = ref({})

const route = useRoute()

const getGoods = async () => {

const res = await getDetail(route.params.id)

goods.value = res.result

}

onMounted(() => getGoods())

// sku规格被操作时

let skuObj = {}

const skuChange = (sku) => {

console.log(sku)

skuObj = sku

}

// count

const count = ref(1)

const countChange = (count) => {

console.log(count)

}

// 添加购物车

const addCart = () => {

if (skuObj.skuId) {

console.log(skuObj, cartStore.addCart)

// 规则已经选择 触发action

cartStore.addCart({

id: goods.value.id,

name: goods.value.name,

picture: goods.value.mainPictures[0],

price: goods.value.price,

count: count.value,

skuId: skuObj.skuId,

attrsText: skuObj.specsText,

selected: true

})

} else {

// 规格没有选择 提示用户

ElMessage.warning('请选择规格')

}

}

</script>

<template>

<div class="xtx-goods-page">

<div class="container" v-if="goods.details">

<div class="bread-container">

<el-breadcrumb separator=">">

<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

<!--

错误原因：goods一开始{} {}.categories -> undefined -> undefined[1]

1. 可选链的语法?.

2. v-if手动控制渲染时机 保证只有数据存在才渲染

-->

<el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{ goods.categories[1].name }}

</el-breadcrumb-item>

<el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{

goods.categories[0].name

}}

</el-breadcrumb-item>

<el-breadcrumb-item>抓绒保暖，毛毛虫子儿童运动鞋</el-breadcrumb-item>

</el-breadcrumb>

</div>

<!-- 商品信息 -->

<div class="info-container">

<div>

<div class="goods-info">

<div class="media">

<!-- 图片预览区 -->

<XtxImageView :image-list="goods.mainPictures" />

<!-- 统计数量 -->

<ul class="goods-sales">

<li>

<p>销量人气</p>

<p> {{ goods.salesCount }}+ </p>

<p><i class="iconfont icon-task-filling"></i>销量人气</p>

</li>

<li>

<p>商品评价</p>

<p>{{ goods.commentCount }}+</p>

<p><i class="iconfont icon-comment-filling"></i>查看评价</p>

</li>

<li>

<p>收藏人气</p>

<p>{{ goods.collectCount }}+</p>

<p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>

</li>

<li>

<p>品牌信息</p>

<p>{{ goods.brand.name }}</p>

<p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>

</li>

</ul>

</div>

<div class="spec">

<!-- 商品信息区 -->

<p class="g-name"> {{ goods.name }} </p>

<p class="g-desc">{{ goods.desc }} </p>

<p class="g-price">

<span>{{ goods.oldPrice }}</span>

<span> {{ goods.price }}</span>

</p>

<div class="g-service">

<dl>

<dt>促销</dt>

<dd>12月好物放送，App领券购买直降120元</dd>

</dl>

<dl>

<dt>服务</dt>

<dd>

<span>无忧退货</span>

<span>快速退款</span>

<span>免费包邮</span>

<a href="javascript:;">了解详情</a>

</dd>

</dl>

</div>

<!-- sku组件 -->

<XtxSku :goods="goods" @change="skuChange" />

<!-- 数据组件 -->

<el-input-number v-model="count" @change="countChange" />

<!-- 按钮组件 -->

<div>

<el-button size="large" class="btn" @click="addCart">

加入购物车

</el-button>

</div>

</div>

</div>

<div class="goods-footer">

<div class="goods-article">

<!-- 商品详情 -->

<div class="goods-tabs">

<nav>

<a>商品详情</a>

</nav>

<div class="goods-detail">

<!-- 属性 -->

<ul class="attrs">

<li v-for="item in goods.details.properties" :key="item.value">

<span class="dt">{{ item.name }}</span>

<span class="dd">{{ item.value }}</span>

</li>

</ul>

<!-- 图片 -->

<img v-for="img in goods.details.pictures" :src="img" :key="img" alt="">

</div>

</div>

</div>

<!-- 24热榜+专题推荐 -->

<div class="goods-aside">

<!-- 24小时 -->

<DetailHot :hot-type="1" />

<!-- 周 -->

<DetailHot :hot-type="2" />

</div>

</div>

</div>

</div>

</div>

</div>

</template>

2.routers/index.js绑定路由

import Detail from '@/views/Detail/index.vue'

{

path: 'detail/:id',

component: Detail

},

3.页面添加跳转

Home/components/HomeNew.vue添加跳转

<HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">

<ul class="goods-list">

<li v-for="item in newList" :key="item.id">

<RouterLink :to="`/detail/${item.id}`">

<img :src="item.picture" alt="" />

<p class="name">{{ item.name }}</p>

<p class="price">¥{{ item.price }}</p>

</RouterLink>

</li>

</ul>

</HomePanel>