Vue2.5 学习笔记 9.6 使用Ajax获取动态数据

1. 获取AJAX数据

模拟后端传过来的JSON

获取数据：

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      sightName: '',
      bannerImg: '',
      gallaryImgs: [],
      list: []
    }
  },
  methods: {
// 通过axios.get获取数据 并且获得id值
    getDetailInfo () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleGetDataSucc)
    },
    handleGetDataSucc (res) {
      res = res.data
// 将各个数据传递给本地变量
      if (res.ret && res.data) {
        const data = res.data
        this.sightName = data.sightName
        this.bannerImg = data.bannerImg
        this.gallaryImgs = data.gallaryImgs
        this.list = data.categoryList
      }
    }
  },
//使用生命周期钩子获取数据
  mounted () {
    this.getDetailInfo()
  }
}
</script>


// router

    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ],



//Detail.vue/template

<template>
  <div>
将数据传递给各个组件
    <detail-banner
      :sightName="sightName"
      :bannerImg="bannerImg"
      :gallaryImgs="gallaryImgs"
    ></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

Banner.vue子组件展示数据：

<template>
  <div>
    <div class="banner" @click="handleBannerClick">
// 这里
      <img class="banner-img" :src="bannerImg" />
      <div class="banner-info">
// 这里
        <div class="banner-title">{{this.sightName}}</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe6eb;</span>
//这里
          {{this.gallaryImgs.length}}
        </div>
      </div>
    </div>
    <common-gallary
// 这里
      :imgs="gallaryImgs"
      v-show="showGallary"
      @close="handleGallaryClose"
    >
    </common-gallary>
  </div>
</template>

  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },

List.vue：

<template>
  <div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-children">
//这里 
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

到了这里主要的是写完了。但是还有2个BUG

 

mounted会做缓存 所以每次点击页面进来 都不会再重新请求数据 这样 id永远都是001

所以需要如下操作：

// 根目录的App.vue

<template>
  <div id="app">
// 他这里吧所有的组件都用keep-alive包裹建缓存   使用exclude 排除组件 也就是说 Detail这个组件不执行缓存机制。
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

第二个问题就是在每次点击进去详情页的时候  页面都不会在顶部 滚动条会在不同页面上互相影响。 所以需要在router/index.js需要添加如下代码：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ],
// 这里添加
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

这样就搞定了。  

详情查看：https://cn.vuejs.org/v2/guide/routing.html