<template>
<div class="goods-list">
<!-- 两种跳转方式 -->
<!-- 1.标签跳转 ,即使用 a 标签形式跳转 -->
<!-- <router-link :to="'/home/goodsInfo/'+g.id" tag="div" class="goods-item" v-for="g in goodsList" :key="g.id" >
<img :src="g.img_url" />
<h1 class="title">{{g.title}}</h1>
<div class="info">
<p class="price">
<span class="now">¥{{g.market_price}}</span>
<span class="old">¥{{g.sell_price}}</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩{{g.stock_quantity}}件</span>
</p>
</div>
</router-link> -->
<!-- 2.编程式跳转 ,即使用 JS 编程跳转 window.location.href -->
<div class="goods-item" v-for="g in goodsList" :key="g.id" @click="goDetails(g.id)">
<img :src="g.img_url" />
<h1 class="title">{{g.title}}</h1>
<div class="info">
<p class="price">
<span class="now">¥{{g.market_price}}</span>
<span class="old">¥{{g.sell_price}}</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩{{g.stock_quantity}}件</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pageindex: 1,
goodsList: [ ],
loading: false
};
},
created() {
this.getGoodsList();
this.scroll();
},
methods: {
scroll() {
var that = this;
window.onscroll = function() {
// 变量scrollTop是滚动条距离顶部的距离,windowHeight是可视区的高度,scrollHeight是滚动条的总高度
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
// console.log("距顶部" + scrollTop + "\n可视区高度" + windowHeight + "\n滚动条总高度" + scrollHeight);
if (scrollTop + windowHeight == scrollHeight) {
if (that.loading) return; //当上一次获取到的数据长度为0时,该判断 return 加载不执行
that.loading = true;
that.pageindex++;
var timeout = setTimeout(function() {
that.getGoodsList();
that.loading = false;
}, 500);
}
};
},
getGoodsList() {
this.$http
.get(
"url/api/getgoods?pageindex=" +
this.pageindex
)
.then(result => {
console.log(result.body);
if (result.body.status === 0 && result.body.message.length > 0) {
// this.goodsList = result.body.message;
console.log(this.goodsList);
if (this.goodsList.length > 0) {
this.goodsList = this.goodsList.concat(result.body.message);
} else {
this.goodsList = result.body.message;
}
console.log(this.goodsList);
} else {
this.loading = true;
}
});
},
goDetails(id){
// 使用JS的方式进行跳转(路由导航)
// 注意:区分 this.$route 和this.%router
// this.$route 是路由【参数对象】,所有路由中的参数,params,query 都属于它
// this.$router 是路由【导航对象】,用它可以方便的使用JS代码,实现路由的前进、后退、跳转到新的URL地址
// this.$router.push({ name: 'user', params: { userId }}) 给路由命名
// 带参数 this.$router.push({ path: `/user/${userId}` })
// this.$router.replace() 不会向 history 添加新记录,而是跟它的方法名一样,替换掉当前的 history 记录
// this.$router.go(n) 在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
console.log(this);
// 1.最简单的
// this.$router.push('/home/goodsInfo/'+id);
// 2.传递对象
// this.$router.push({path:"/home/goodsInfo/"+id}) //字符串拼接
// this.$router.push({path:`/home/goodsInfo/${id}`}) //ES6 模板字符串 ${expression}占位符
// 3.命名的路由
this.$router.push({name:"goodsInfo",params:{id}})
// 4. 带查询参数,变成 /register?plan=private
// this.$router.push({ path: "goodsInfo", query: { plan: 'private' }})
}
}
};
</script>
<style lang="scss" scroped>
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 5px;
justify-content: space-between;
.goods-item {
width: 49%;
border: 1px solid #eee;
border-radius: 10px 10px;
box-shadow: 0 0 5px #eee;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 5px 0px;
min-height: 295px;
img {
width: 95%;
margin: 0 auto;
margin-top: 10px;
}
.title {
font-size: 14px;
margin: 10px 5px;
}
.info {
background: #eee;
padding: 10px;
border-radius: 0 0 10px 10px;
p {
margin: 0 0;
}
.price {
.now {
color: red;
font-size: 16;
font-weight: bold;
}
.old {
text-decoration: line-through;
font-size: 12px;
}
}
.sell {
display: flex;
justify-content: space-between;
}
}
}
}
</style>
[Vue] 路由vue-router两种跳转方式
最新推荐文章于 2023-06-05 11:06:43 发布