vue学习笔记-路由结合请求数据 数据渲染（17）

路由结合请求数据 数据渲染

首先在main.js里面引入vue-resource，前提先安装vue-resource插件（前面有讲解过安装vue-resource，这里就不再赘述）

new组件里面代码如下：
将aid传给conten组件；

<template>
  <div id="news">
    <ul>
    	<li v-for="(item,index) in list" :key=index>
        <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        list:[]
      }
    },
    methods:{
      requestData(){
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
        this.$http.jsonp(api).then((response)=>{
          //jsonp请求需后台api接口要支持jsonp
          //console.log(response);
          //注意this指向 此时改为箭头函数
          this.list=response.body.result
        },(err)=>{
          console.log(err)
        })
      }
    },
    mounted() {
      this.requestData()
    }
  }
</script>

<style lang="scss">
  #news{
    ul{
      padding: .75rem ;
    }
    li{
      margin: 1rem 0;
    }
  }
</style>

在content组件拿到对应的aid，通过对应的aid获取到对应的内容并展示数据

<template>
  <div id="content">
    <h2>{{list.title}}</h2>
    <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;
      this.requestData(aid)
    },
    methods:{
      requestData(aid){
        //get请求如果涉及到跨域,后台要允许跨域请求
        var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
        this.$http.get(api).then((response)=>{
          //jsonp请求需后台api接口要支持jsonp
          //console.log(response);
          //注意this指向 此时改为箭头函数
          this.list=response.body.result[0];
        },(err)=>{
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="scss">
#content{
  overflow: hidden;
  padding: .75rem;
  line-height: 2;
  img{
    max-width: 100%;
  }
}
</style>

App.vue文件代码如下：

<template>
  <div id="app">
    <header class="header">
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return{

    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  background: #000;
  line-height: 4.4rem;
  height: 4.4rem;
  text-align:center;
  a{
    display: inline-block;
    padding: 0 1rem;
    color: #fff;
  }
}
</style>

main.js文件代码如下：

import Vue from 'vue'
import App from './App.vue'

//引入公共样式
import './assets/css/basic.scss'


//引用vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource);

// 引用路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//创建组件并引入
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue'
import Product from './components/Product.vue'

//配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content }, /* 动态路由 */
  { path: '/product', component: Product },
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

//实例化VueRouter
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

//挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

运行效果如下：

点击li进入content页面：