vue列表到详情页的实现
路由里边的 router/index.jspath:'/detail/:id' 动态id列表页渲染时::to="'/detail/'+item.id"===>id是指请求文章列表的id,可以是aid,bid等等请求列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1点击进入路由变h
·
路由里边的 router/index.js path:'/detail/:id' 动态id
列表页渲染时:
:to="'/detail/'+item.id" ===>id是指请求文章列表的id,可以是aid,bid等等
请求列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
点击进入路由变http://localhost:8080/#/detail/456
详情页需要请求文章详情的接口 http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=456,
传入 this.$route.params.id 和路由里面一样的id写死
mounted(){
var aid=this.$route.params.id;
//console.log(aid)
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get请求如果跨域的话 后台php java 里面要允许跨域请求
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.detail=response.data.result[0]; //根据数据结构赋值
},(err)=>{
console.log(err)
})
}
}
更多推荐
已为社区贡献11条内容
所有评论(0)