创建分支: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"></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