vue列表到详情页的实现

路由里边的 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)
                })
            }
        }

 

转载于:https://www.cnblogs.com/lwj820876312/p/9107910.html