Vue路由结合请求数据

叁歲伎倆 2022-03-17 13:37 254阅读 0赞

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

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

1.  点击 “Go to News” 跳转到 新闻列表界面 (api接口已有)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]
2.  点击任意一条新闻 跳转到其新闻详细 (api接口已有)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]

###### 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>
                
                
            </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中都有详细的讲解,可以参考

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

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

**Content.vue**

<template>
        <div id="content">
            <h2>{ { list.title}}</h2>
    
            <div v-html="list.content"></div>
        </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的路由跳转与请求数据就是结合在一起了。若有任何疑问或是不解，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220317/80caea2015e348189ba51dfdf7b0168e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220317/3743e23e8a69411583f57b8bba59da32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]: /images/20220317/d0696b42555a430b9159e0d3602b2de8.png