路由学习(2):动态加载新闻详细页

需要实现：点击列表页，进入新闻详细页。
1、news-list.vue的变化：

<h2><router-link :to="{name:'newsdetail',params:{newsid:news.newsid}}"> {{news.title}} </router-link><small>{{news.pubtime}}</small></h2>
<p>{{news.desc}}</p>

我们在newlist数据源里，加上了id字段:

<script>
    export default{
        data(){
            return{
                newslist:[
                    {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"},
                    {newsid:"102",pubtime:"2016-10-28",title:"系统之战",desc:"如何支持业务解决"},
                    {newsid:"103",pubtime:"2016-10-27",title:"大文件存储",desc:"背后的你不得不知的技术"},
                    {newsid:"104",pubtime:"2016-10-26",title:"飞天进化",desc:"阿里巴巴技术委员会"},
                ]
            }
        },
    }
</script>

然后重点是：

<router-link :to="{name:'newsdetail',params:{newsid:news.newsid}}"> </router-link>

更多资料可以查看：
http://router.vuejs.org/zh-cn/essentials/named-routes.html

2、入口文件jssrc/index.js的变化

const routerConfig = new VueRouter({
    routes: [
        { path: '/', component: newslist},
        { path: '/news', component: newslist, name:"newslist"},
        { path: '/news/:newsid', component: newsdetail, name:"newsdetail"},
        { path: '/login', component: userlogin,name:"userlogin" }
    ]
})

重点是：

{ path: '/news/:newsid', component: newsdetail, name:"newsdetail"},

意思是/news/id参数，访问的就是具体的id的新闻详细组件

3、news-detail.vue

<template>
    <div class="news-detail">
        <div class="row">
            <div class="page-header">
                <h2>{{newsdetail.title}}<small>{{newsdetail.pubtime}}</small></h2>
                <p>{{newsdetail.desc}}</p>
            </div>
        </div>
    </div>
</template>



<script>
    export default{
        // 创建的时候[生命周期里]
        created(){
            this.$http.get("http://localhost/news.php?newsid="+this.$route.params.newsid).then(function(res){
                this.newsdetail = res.body;
            },function(res){

            });
        },

        data(){
            return{
                newsdetail:[],
            }
        },
    }
</script>

在组件开始创建的时候，我们发送http请求，从后端取出相应数据。

"http://localhost/news.php?newsid="+this.$route.params.newsid

传递参数。