上篇,实现了递归组件。本篇,实现详情页面的数据动态获取。
先新建一个分支 detail-ajax,pull 下来,在新分支上写代码。
其实,动态获取数据,之前就做过。使用axios, 就可以了。
父组件 Detail.vue 代码如下。
<template>
<div>
<detail-banner
:sightName="sightName"
:bannerImg="bannerImg"
:bannerImgs="gallaryImgs"
></detail-banner>
<detail-header></detail-header>
<div class="content">
<detail-list :list="list"></detail-list>
</div>
</div>
</template>
<script>
import DetailHeader from './components/Header'
import DetailBanner from './components/Banner'
import DetailList from './components/List'
import axios from 'axios'
export default {
name: 'Detail',
components: {
DetailBanner,
DetailHeader,
DetailList
},
data () {
return {
sightName: '',
bannerImg: '',
gallaryImgs: [],
categoryList: [],
list: []
}
},
methods: {
getDetailInfo () {
// axios.get('/api/detail.json?id=' + this.$route.params.id)
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
console.log(data)
this.sightName = data.sightName
this.bannerImg = data.bannerImg
this.gallaryImgs = data.gallaryImgs
this.categoryList = data.categoryList
this.list = data.categoryList
}
}
},
mounted () {
this.getDetailInfo()
}
}
</script>
<style lang="stylus" scoped>
.content
height: 50rem
</style>
Banner.vue 代码如下。
<template>
<div>
<detail-banner
:sightName="sightName"
:bannerImg="bannerImg"
:bannerImgs="gallaryImgs"
></detail-banner>
<detail-header></detail-header>
<div class="content">
<detail-list :list="list"></detail-list>
</div>
</div>
</template>
<script>
import DetailHeader from './components/Header'
import DetailBanner from './components/Banner'
import DetailList from './components/List'
import axios from 'axios'
export default {
name: 'Detail',
components: {
DetailBanner,
DetailHeader,
DetailList
},
data () {
return {
sightName: '',
bannerImg: '',
gallaryImgs: [],
categoryList: [],
list: []
}
},
methods: {
getDetailInfo () {
// axios.get('/api/detail.json?id=' + this.$route.params.id)
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
console.log(data)
this.sightName = data.sightName
this.bannerImg = data.bannerImg
this.gallaryImgs = data.gallaryImgs
this.categoryList = data.categoryList
this.list = data.categoryList
}
}
},
mounted () {
this.getDetailInfo()
}
}
</script>
<style lang="stylus" scoped>
.content
height: 50rem
</style>
有一点,就是 在App.vue 中每个路由都加了 keep-alive 标签。如果我们不想要详情页面加上这个标签,一种方法,是之前使用activated 钩子函数,还有一种方法,如下。App.vue 代码。
<template>
<div id="app">
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
</div>
</template>
最后,还有一个问题,当一个页面,滚动到中部,跳转到另一个页面,滚动条的距离会保持过去。这个也很好解决。查看vue-router 文件的滚动行为。
然后将router目录下的 index.js 添加一段代码,即可。如下。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
import City from '@/pages/city/City.vue'
import Detail from '@/pages/detail/Detail.vue'
Vue.use(Router)
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 }
}
})
Done!
可以提交合并了!