一般vue项目中 一个页面是由多个组件组成的，各个组建的数据都是统一在主界面的组件中发送axios请求获取，这样极大地提高了性能。

一、首先导入用到的组件和axios

cp网站搭建制作TG<hahanunu>

import HomeHeader from ‘./components/Header’

import HomeSwiper from ‘./components/Swiper’

import HomeIcons from ‘./components/Icons’

import HomeRecommend from ‘./components/Recommend’

import HomeWeekend from ‘./components/Weekend’

import axios from ‘axios’

export default {

name: ‘Home’,

components: {

HomeHeader,

HomeSwiper,

HomeIcons,

HomeRecommend,

HomeWeekend

},

二、在data中将要用到的数据给一个初始值，为空

data () {

return {

swiperList: [],

iconList: [],

recommendList: [],

weekendList: []

}

},

三、在methods中写方法，发送axios获取数据

methods: {

getHomeInfo () {

axios.get(‘/api/index.json’)

.then(this.getHomeInfoSucc)

},

getHomeInfoSucc (res) {

res=res.data

if (res.ret && res.data) {

const data = res.data

this.swiperList = data.swiperList

this.iconList = data.iconList

this.recommendList = data.recommendList

this.weekendList = data.weekendList

}

}

},

mounted () {

this.getHomeInfo()

}

}