Vue路由结合请求数据

下面我做一个小例子将Vue路由和请求数据结合在一起。

先来看页面呈现的效果：（电脑是需要连网的）

点击 “Go to News” 跳转到新闻列表界面 (api接口已有)
点击任意一条新闻跳转到其新闻详细 (api接口已有)

1.那么接下来，我们先定义一个News组件

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
     
    <ul>
        <li v-for="(item,key) in list">
            <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
            <!-- 控制台查看内容的aid-->
            <!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
        </li>
    </ul>
 </div>
</template>

<script>

export default {
 data(){
     return {
         msg:'我是一个news组件',
         list:[]
     }
 },
 methods:{
     requestData(){
         //jsonp请求的话，后台api接口要支持jsonp
         /**
          * 新闻列表接口：
        http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
          */
         var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
         this.$http.jsonp(api).then((response)=>{
            console.log(response);

            this.list = response.body.result;  //将取得的数据渲染到list当中
            //注意：用到this要注意this的指向
         },function(err){
             console.log(err);
         })
     }
 },
 mounted(){
     this.requestData();   // 页面刷新时就加载数据
 }
 
}
</script>

2.在main.js 中完成请求数据和导入使用router的等一系列操作

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource)

//导入并使用router
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },/* 动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

在请求数据前要记得安装vue-resource模块(npm install vue-resource --save )，Vue如何请求数据与Vue的动态路由在我的前几个csdn中都有详细的讲解,可以参考

做到这一步即可看到如下界面：
在这里插入图在这里插入图片描述片描述
News.vue 中第9行和第37行的数据均是来自控制台中的名称

3.新定义一个Content.vue 组件做新闻的详情页面

Content.vue

<template>
    <div id="content">
        <h2>{{list.title}}</h2>

        <div v-html="list.content"></div><!--解析HTML代码-->
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:"数据",
            list:[]
        }
    },
    mounted(){
        //console.log(this.$route.params);//获取动态路由传值

        var aid = this.$route.params.aid;// 动态获取地址的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.list = response.body.result[0]//这里为什么有放个0呢  具体看控制台的数据
            },(err)=>{
                console.log(err)
            })
            
        }
    }
}
</script>

4.同样在main.js中配置路由

代码为上面的main.js 代码中的第20行和第27行

动态获取每条新闻的aid，运用这个思路即可获取新闻的详情了。

5.最后这是根组件App.vue

App.vue

<template>
  <div id="app">
    
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:'你好vue'
    }
  }
  
}
</script>

<style>

</style>

具体样式可自行添加，那么Vue的路由跳转与请求数据就是结合在一起了。若有任何疑问或是不解，请在下方评论，谢谢。

扫描二维码关注公众号，回复： 5396269 查看本文章