Vue.js通过api数据点击跳到相对应的页数

最新推荐文章于 2022-05-12 16:06:22 发布

小橘子o

最新推荐文章于 2022-05-12 16:06:22 发布

阅读量1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37693192/article/details/73349343

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML代码:

这是分类的页面,因为分类这边没有数据

<div class="container">
<div class="row Lists" id="Lists">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" v-for="list in lists">
<a href="../html/details.html?page=1"><span>Toan bo san pham</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=2"><span>Volkswagen</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=3"><span>SARATOGA</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=4"><span>Horien</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=5"><span>Nate</span><span><img src="../images/enter.png"></span></a>
</div>
</div>
</div>

JS代码:

这时候点击分类中的任何一个,就会跳到商品详情相对应的页面,在商品详情的js代码中插入

window.onload = (function () {

//截取数据页数的代码,有两种方法;

//这是方法1,我注释掉了

// var searchURL = window.location.search;
// searchURL = searchURL.substring(1,searchURL.length);//截取被点击相对应的页数
// var targetPageId = searchURL.split("?")[0].split("=")[1];

//方法2
var searchURL=location.href.substring(location.href.indexOf("=")+1,location.href.length);
var targetPageId=searchURL.substring(1,searchURL.indexOf("?"));//截取被点击相对应的页数
// alert(targetPageId);
var vm = new Vue({
el: "#product",
data: {
details: {}
},
mounted: function () {
this.$nextTick(function () {
this.$http.jsonp('http://thanbach.com/YXShoppingMallApp/exclusiveShop_getExclusiveShopGoodsByType.jhtml',
{
params: {
"f_sId": '2968d399-4402-4baf-b407-2b329f2a2c02',
"f_sType": 18,
"page": targetPageId
}
}).then(function (res) {
vm.details = res.data.rows;
});
})
}
});
});