18-2.Vue路由结合请求数据 实现新闻列表 新闻详情数据渲染

内容：结合上一章得动态路由，实现从接口获取新闻列表以及新闻详情数据并在页面渲染展示，请求数据用vue-resource插件；

代码示例
列表页：

Home.vue
<template>
    <div>我是HOME组件
        <ul>
            <li v-for="(item,key) in list">
                <!--<router-link :to="'/shopcontent?aid='+key" >{{item}}</router-link>-->
                <router-link :to="'/shopcontent/aid='+item.aid" >{{item.title}}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>

export default {
    data(){
  return{
      msg:'msg',
      list:[]
  }
    },mounted(){
        
       var api='http://www.egap100.com/appapi.php?a=getPortalList&catid=20&page=1'
        this.$http.get(api).then((Response)=>{
            this.list=Response.body.result;

        },(err)=>{})

    
    }
}
</script>
<style lang='scss'>

</style>

详情页

shopcontent.vue
<template>
    <div>我是shopcontent详情页面
        <h2 v-html="list.title"></h2>
        <div v-html="list.content"></div>
    </div>
    
</template>

<script>


export default {
    data(){
        return{
            msg:'msg',
            list:[]
        }
    },mounted(){
     

       console.log(this.$route.params.aid);
       var aid =this.$route.params.aid;


       this.requestdata(aid);
    },methods:{
        requestdata(aid){
             var api= 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&'+aid;
            this.$http.get(api).then((Response)=>{
                console.log(api);
                console.log(Response);
           this.list=Response.body.result[0]
       },(err)=>{})
        }
    }
}
</script>
<style lang="scss">

</style>