之前详情页里的数据是我自己添加上的，现在需要用ajax获取动态数据
Detail.vue父组件请求axios
这里一定要先引入axios
因为详情页是从首页入口点进来的，所以路由都会不一样，传递的参数去浏览器中切换到Vue模式浏览，如下图所示，请求接口时需要携带参数id，获取参数方法应该是this.$route.params.id
Detail.vue
<template>
<div class="detail">
<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>
<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: {
getDetailInfo() {
axios({
url: '/static/mock/detail.json',
method: 'get',
params: {
id: this.$route.params.id
}
}).then(res => {
console.log(res)
if (res.data.ret && res.data.data) {
this.sightName = res.data.data.sightName
this.bannerImg = res.data.data.bannerImg
this.gallaryImgs = res.data.data.gallaryImgs
this.list = res.data.data.categoryList
}
})
}
},
mounted() {
this.getDetailInfo()
}
}
</script>
<style lang="scss" scoped>
.content {
height: 20rem;
}
</style>
子组件根据接口返回的数据进行数据修改
Banner.vue
子组件props接收父组件传来的数据
<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"></span>
{
{this.gallaryImgs.length}}
</div>
</div>
</div>
<common-gallary
:imgs="gallaryImgs"
v-show="showGallay"
@close="handleGallaryClose"
></common-gallary>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
name: 'DetailBanner',
props: {
sightName: String,
bannerImg: String,
gallaryImgs: Array
},
data() {
return {
showGallay: false
}
},
methods: {
handleBannerClick() {
this.showGallay = true
},
handleGallaryClose() {
this.showGallay = false
}
},
components: {
CommonGallary
}
}
</script>
<style lang="scss" scoped>
.banner {
overflow: hidden;
height: 0;
padding-bottom: 50%;
position: relative;
.banner-img {
width: 100%;
}
.banner-info {
display: flex;
position: absolute;
left: 0;
right: 0;
bottom: 0;
line-height: 0.6rem;
color: #fff;
background-image: linear-gradient(
top,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.8)
);
.banner-title {
flex: 1;
font-size: 0.32rem;
padding: 0 0.2rem;
}
.banner-number {
height: 0.4rem;
line-height: 0.4rem;
margin-top: 0.1rem;
padding: 0 0.32rem;
border-radius: 0.2rem;
background: rgba(0, 0, 0, 0.6);
font-size: 0.24rem;
.banner-icon {
margin-right: 0.1rem;
}
}
}
}
</style>
现在基本上是完成了这个页面数据的替换了，但还存在些小问题，造成体验不好
问题一
当我们第一次从首页点进去之后id是0001，返回首页换个入口再进的时候还是id还是0001，并没有重新取数据
解决方法：
因为detail详情页通过keep-alive有了缓存，所以mounted() 钩子函数只会执行一次，如现在想要移除detail详情页的缓存，在keep-alive标签加上exclude=“Detail”这样每次进入detail详情页mounted() 钩子函数都会执行
问题二
滑动多个页面会相互影响；滑动首页，详情页也跟着滑动，例如：
解决方法：
vue.js官方文档里给我们提供了一个滚动行为的方法，只需要在路由里routes下面添加点东西
附上官方链接：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8
问题三
Vue中使用keep-alive对组件进行缓存 ，exclude属性表示要去除被缓存的组件，其它组件都会被缓存。
当使用这个属性后，对应的这个组件的activated() deactivated()方法就不会执行了。
解决方法：
修改为
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}