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

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

相关推荐