Vue2.5 旅游项目实例23 详情页 Ajax动态获取数据

创建分支：detail-ajax

拉取到本地并切换分支：

git pull
git checkout detail-ajax

打开Detail.vue页面，添加代码：

import axios from 'axios'

export default {
  data () {
    return {
      sightName: '', // 大标题
      bannerImg: '', // banner
      gallaryImgs: [], // 画廊轮播
      list: []
    }
  },
  mounted () {
    this.getDetailInfo()
  },
  methods: {
    getDetailInfo () {
      axios.get('/api/detail.json',
        {params: {id: this.$route.params.id}}
      ).then(this.getDetailInfoSucc)
    },
    getDetailInfoSucc (res) {
      res = res.data
      // console.log(res)
      if (res.ret && res.data) {
        this.sightName = res.data.sightName
        this.bannerImg = res.data.bannerImg
        this.gallaryImgs = res.data.gallaryImgs
        this.list = res.data.ticketList
      }
    }
  }
}

然后传递给子组件：

<template>
<div>
  <detail-banner :sightName="sightName"
   :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></detail-banner>
  <detail-header></detail-header>
  <div style="height:50rem">
    <detail-list :list="list"></detail-list>
  </div>
</div>
</template>

打开Banner.vue接收：

<template>
<div>
  <div class="banner" @click="handleBanner">
    <img class="banner-img" :src="bannerImg" />
    <div class="banner-info">
      <div class="banner-title">{{this.sightName}}</div>
      <div class="banner-number">
        <i class="iconfont banner-icon">&#xe692;</i>
         {{this.gallaryImgs.length}}
      </div>
    </div>
  </div>
  <common-gallary :imgs="gallaryImgs" v-show="showGallary" @close="gallaryClose"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
}
</script>

这时候回到再进入另一个详情页，发现请求的id还是0001的，并没有去重新请求。因为我们用了keepalive，所以要用 activated 生命周期钩子：

activated () {
    this.getDetailInfo()
  },

下面还可以换另一种方式解决这个问题： exclude="组件名"

打开App.vue文件：

<template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>

表示除了组件名是 Detail 的，其他的页面都会被缓存。

注意：这里有个问题，就是在Header.vue文件中，生命周期函数原来用的是 activated ，但是已经取消了缓存，要改回用 mounted ，否则就不起作用了。

刷新后从详情页回到首页，再点击另一个详情页进入，发现重新发起了ajax请求。

每个页面里的name，知道的有三个用途：

1.使用递归组件时，会用到name

2.当某个页面想取消缓存时，也会用到name

3.浏览器中Vue.js devtools插件上的Vue，会看到name组件名

另外还有一个小bug：就是在页面滚动在中间的时候，点击进入详情页，一打开详情页时，也是在中间的位置。我们希望的是，每次新进入一个页面，都在页面的顶部。

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

打开路由index.js文件，添加：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

ok，功能实现了。

然后自己又添加了一些内容：

<template>
<div>
  <div class="item" v-for="(item, index) in list" :key="index">
    <div class="item-title border-bottom">
      <span class="item-title-icon"></span>
      {{item.title}}
    </div>
    <div v-if="item.int" class="item-int">{{item.int}}</div>
    <div v-if="item.openTime" class="item-openTime">{{item.openTime}}</div>
    <div v-if="item.tel" class="item-tel">{{item.tel}}</div>
    <div v-if="item.address" class="item-address">{{item.address}}</div>
    <div class="item-children" v-if="item.children">
      <detail-list :list="item.children"></detail-list>
    </div>
  </div>
</div>
</template>

效果图：

 

提交下代码：

git add .
git commit -m "完成详情页动态获取数据'
git push

git checkout master
git merge detail-ajax
git push