请求数据的接口：
新闻列表接口：http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1

新闻详情接口：http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488

main.js中

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News },
                { path: '/Product', component: Product },//get传值
                { path: '/Content/:aid', component: Content }//动态路由
               
              ]

App.vue
<template>
  <div id="app">
    <header class="header">
       <router-link to="/Home" >首页</router-link>
        <router-link to="/News">新闻</router-link>
    </header>
    <hr>
   <router-view></router-view>
   
  </div>
</template>

<script>
export default {
  data () {
    return {
     msg:'hello ,vue!'
      
    }
    
  }
}
</script>

<style lang="scss">
#app{
  width:100%;
}
.header{
  height: 4.4rem;
  line-height: 4.4rem;
  background:#000;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  a{
    color: #fff;
    padding: 0 2rem;
  }
}

</style>

新闻列表页：

//News.vue页面
<template>
    <div>
       <ul class="list">
           <li v-for="(item,aid) in list" :key="aid">
               <router-link :to="'/Content/'+item.aid">{{item.title}}</router-link>
           </li>
       </ul>
    </div>
</template>
<script>

import Bus from '../model/bus'
export default {
    data(){
       return{
            aaa:'m,sh',
            list:[]
       }
    },
     methods:{
         requestData(){
             /* 请求数据
                如果用jsonp请求数据的话，后台一定要支持jsonp
             */
            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
             this.$http.jsonp(api).then(
                //  出现this，要注意this的指向问题，es6语法可以避免，或则提前声明that
               (response)=>{
                // console.log(response)
                this.list=response.body.result
             },(err)=>{
                 console.log(err)
             })
         }
     },
     mounted(){
        //  在dom渲染完成即开始向后台请求数据
         this.requestData();
        //  通过Bus.on来接收广播的数据
         Bus.$on('to-news',function(data){
             alert(data)

         })
     }
  
}
</script>

<style lang="scss" scoped>
.list{
    li{
        padding: 1rem;
        height: 3.4rem;
        line-height: 3.4rem;
        border-bottom: 1px solid #fff;
        font-size: 1.6rem;
        a{
            color: #666;
            text-decoration: none;
            
        }
    }
}
</style>

新闻详情页面：

//Content.vue
<template>
    <div id="content">
        <h2>{{list.title}}</h2>
        <!-- 用v-html解析后台传来的HTML代码 -->
        <div  v-html="list.content">
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        //console.log(this.$route.params)/* 获取动态路由传值 */
        var aid=this.$route.params.aid
        // console.log(aid)
        // 调用requestData()方法请求新闻内容
        this.requestData(aid)

    },
    methods:{
        requestData(aid){
            // 新闻详情接口
            var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
            // get请求如果跨域的话，后台php java要允许跨域请求
            this.$http.get(api).then((res)=>{
                this.list=res.body.result[0]
            },(err)=>{
                console.log(err)
            })
        }
    }
}
</script>
<style lang="scss" >
#content{
    padding: 1rem;
    line-height: 2;
    img{
        max-width: 100%;
    }
}
</style>

最后的效果：