Vue基础之路由结合请求数据

最新推荐文章于 2023-09-06 13:58:17 发布

lemon94924

最新推荐文章于 2023-09-06 13:58:17 发布

阅读量822

点赞数 1

CC 4.0 BY-SA版权

分类专栏：菜鸡提升第一步 vue基础 Vue

本文链接：https://blog.youkuaiyun.com/lemon94924/article/details/89509233

菜鸡提升第一步同时被 3 个专栏收录

10 篇文章

订阅专栏

vue基础

9 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文介绍了一个使用Vue.js构建的新闻应用案例，包括主页、新闻列表及详情页的实现过程。通过Vue-resource进行数据请求，利用Vue-router实现页面间的导航。文章详细展示了从组件创建到路由定义，再到数据请求与展示的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

1.主页（App.vue）设置新闻导航，
2.（News.vue）用vue-resource请求数据得到新闻列表，
3.每个新闻列表设置路由进入新闻详情页（Content.vue）

main.js

**main.js**
/*设置vue-resource*/
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
/*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 = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/pcontent', component: Pcontent },
  { path: '/content/:aid', component: Content },
  { path: '*', redirect: '/home' }//默认调转
];
/*3.实例化vueRouter*/
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});



Vue.config.productionTip = false;

/* eslint-disable no-new */
/*4.挂载vueRouter*/
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});
/*5.<router-view></router-view>放在根组件app.vue里*/

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 {
            name: 'App',
            data(){
              return {
                msg:'hello-world'
              }
            }
    }
</script>

News.vue

<template>
    <div>
          <h2>新闻组件</h2>
      <ul class="list">
        <li v-for="(item,key) in list">
          <router-link :to="'/content/'+item.aid">{{　item.title }}</router-link>
        </li>
      </ul>
    </div>
</template>
<script>
    export default {
        name: "News",
        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)=>{
                 console.log(response);
                 this.list = response.body.result;
               },function(error){
                 console.log(error);
               })
             }
            },
              mounted() {
                this.requestData();
              }
    }
</script>

Content.vue

<template>
    <div>
      <h2>{{  list.title}}</h2>
      <h5>文章序列号：{{ list.aid}}</h5>
      <h5>作者：{{ list.username}}</h5>
      <div v-html="list.content">
        {{list.content}}
      </div>
    </div>
</template>
<script>
    export default {
        name: "Content",
        data(){
          return{
              list:[]
          };
       },mounted() {//默认页面加载时获取
          console.log(this.$route.params);

          var aid = this.$route.params.aid;

          this.requestData(aid);
      },
      methods:{
            requestData(aid){
                    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];
                    },function(error){
                      console.log(error);
                    })
            }
      }
    }
</script>