点击对应商品进入对应商品页面
like.vue
@click="goDetail(item.id)"
路由传值就两种方法 看个人喜好
显示:
this.$router.push({
path: "/detail",
//点击跳转显示的id
query: {
id: id,
},
});
隐藏:
this.$router.push({
name: "/Detail",
//点击跳转隐示的id
params: {
id: id,
},
});
在detai.vue页面里接收
用this.$route
created() {
console.log(this.$route.query.id);
},
log 3
查询商品id的接口
server index.js
//查询商品id的数据
router.get("/api/goods/id", function (req, res, next) {
let id = req.query.id;
connection.query(
"select*from goods_list where id= " + id + "",
function (error, results) {
if (error) throw error;
res.json({
code: 0,
data: results[0],
});
}
);
});
前端 请求接口
引入
import http from "@/common/api/request.js";
async getData() {
let id = this.$route.query.id;
let res = await http.$axios({
url: "/api/goods/id",
params: { id },
});
this.goods = res;
console.log(res);
},
<template>
<div class="detail">
<header>
<div class="header-returns" v-show="isShow">
<div @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div>
<i class="iconfont icon-fanhui"></i>
</div>
</div>
<div class="header-bar" v-show="!isShow" :style="styleOption">
<div @click="goBack"><i class="iconfont icon-RectangleCopy"></i></div>
<div>
<span>商品详情</span>
<span>商品评价</span>
</div>
<div>
<i class="iconfont icon-fanhui"></i>
</div>
</div>
</header>
<section ref="wrapper">
<div>
<div class="swiper-main">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="(item, index) in detailList" :key="index">
<img :src="item.imgUrl" alt="" />
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="goods-name">
<h1>{{ goods.name }}</h1>
<div>性价首先,就是好喝</div>
</div>
<div class="goods-price">
<div class="oprice">
<span>$</span>
<b>{{ goods.price }}</b>
</div>
<div class="pprice">
<span>价格:</span>
<del>{{ goods.price }}</del>
</div>
</div>
<div>
<img :src="goods.imgUrl" alt="" />
<img :src="goods.imgUrl" alt="" />
<img :src="goods.imgUrl" alt="" />
<img :src="goods.imgUrl" alt="" />
</div>
</div>
</section>
<footer>
<div class="left">
<ul>
<li>
<i class="iconfont icon-RectangleCopy"></i>
<span>客服</span>
</li>
<li>
<i class="iconfont icon-RectangleCopy"></i>
<span>购物车</span>
</li>
<li>
<i class="iconfont icon-RectangleCopy"></i>
<span>收藏</span>
</li>
</ul>
</div>
<div class="right">
<div class="add-cart">加入购物车</div>
<div>立即购买</div>
</div>
</footer>
</div>
</template>
<script>
//引入better-scroll
import BetterScorll from "better-scroll";
import http from "@/common/api/request.js";
export default {
data() {
return {
detailList: [
{ id: 1, imgUrl: "./images/l1.png" },
{ id: 2, imgUrl: "./images/l11.jpeg" },
{ id: 3, imgUrl: "./images/l111.jpeg" },
],
goods: [],
isShow: true,
styleOption: [],
BetterScroll: [],
swiperOption: {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
},
// swiperList: [
// { id: 1, imgUrl: "./images/1.jpeg" },
// { id: 2, imgUrl: "./images/2.jpeg" },
// { id: 3, imgUrl: "./images/3.jpeg" },
// ],
};
},
created() {
this.getData();
// console.log(this.$route.query.id);
// console.log(this.goods);
},
mounted() {
// 当dom都加载完毕了再去执行
this.BetterScroll = new BetterScorll(this.$refs.wrapper, {
click: true,
//去年下拉回弹效果
probeType: 3,
bounce: false,
});
//添加滑动事件
this.BetterScroll.on("scroll", (pos) => {
let posY = Math.abs(pos.y);
//下拉慢慢变透明
let opacity = posY / 180;
opacity = opacity > 1 ? 1 : opacity;
this.styleOption = {
opacity: opacity,
};
if (posY >= 100) {
this.isShow = false;
} else {
this.isShow = true;
}
});
},
methods: {
async getData() {
let id = this.$route.query.id;
let res = await http.$axios({
url: "/api/goods/id",
params: { id },
});
this.goods = res;
console.log(res);
},
//返回上一页
goBack() {
this.$router.back();
},
},
};
</script>
<style scoped lang="less">
.detail {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
flex: 1;
overflow: hidden;
}
header {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 1.17333rem;
.header-returns {
display: flex;
width: 100%;
height: 1.1733rem;
justify-content: space-between;
div {
width: 0.9333rem;
height: 0.9333rem;
line-height: 0.7333rem;
margin: 0 0.2666rem;
border-radius: 50%;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
i {
font-size: 0.6133rem;
color: green;
}
}
}
.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 1.1733rem;
font-size: 0.6667rem;
background-color: #fff;
span {
padding: 0 0.36666rem;
}
i {
padding: 0 0.5333rem;
font-size: 0.48666rem;
}
}
}
.swiper-container {
width: 100%;
}
.swiper-main img {
width: 100%;
}
.swiper-pagination {
width: 100%;
color: #666;
font-size: 0.52666rem;
background-origin: 0.533rem;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0.2667rem;
left: 4.08rem;
width: 100%;
}
.goods-name {
padding: 0.5333rem 0;
border-bottom: 1px solid #999;
h1 {
font-size: 0.58rem;
font-weight: 500;
}
div {
padding: 0.08rem 0;
font-size: 0.3733rem;
color: #9999;
}
}
.goods-price {
padding: 0.5333rem 0.26666rem;
.oprice {
color: red;
span {
font-size: 0.32rem;
}
}
.pprice {
color: #9999;
font-size: 0.37rem;
}
}
footer {
position: fixed;
bottom: 0;
right: 0;
background-color: #fff;
width: 100%;
height: 1.3333rem;
z-index: 999;
display: flex;
.left {
display: flex;
width: 40%;
line-height: 1.3333rem;
justify-content: space-around;
ul {
display: flex;
line-height: 1.3333rem;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
i {
width: 0.7667rem;
height: 0.7667rem;
}
span {
font-size: 0.48rem;
color: #666;
}
}
}
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.3333rem;
width: 60%;
.add-cart {
font-size: 0.48rem;
text-align: center;
color: #fff;
width: 100%;
height: 100%;
background-color: #ff9500;
}
div {
font-size: 0.48rem;
text-align: center;
color: #fff;
width: 100%;
height: 100%;
background: #dd2727;
}
}
}
</style>
keep-alive
作用:缓存组件,
优势:提升性能
用keep-alive会多用两个生命周期activated , deactivated
app.vue页面
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
data里面
id: 0,
created() {
// console.log(1111);
this.id = this.$route.query.id;
this.getData();
// console.log(this.$route.query.id);
// console.log(this.goods);
},
activated() {
// console.log(2222);
console.log(this.id, this.$route.query.id);
// this.id = this.$route.query.id;
if (this.$route.query.id != this.id) {
this.getData();
this.id = this.$route.query.id;
}
},