老师报错了

跟着本次视频敲完之后就这样了，但是点击上海还是可以跳转

<template>

  <div>

    <home-header></home-header>

    <home-swiper :list="swiperList"></home-swiper>

    <home-icons :list="iconList"></home-icons>

    <home-recommend :list="recommendList"></home-recommend>

    <home-weekend :list="weekendList"></home-weekend>

  </div>

</template>

<script>

  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 () {

      return{

        // city: '',

        swiperList: [],

        iconList: [],

        recommendList: [],

        weekendList: []

      }

    },

    methods: {

      getHomeInfo(){

        //2、而axios请求返回的就是一个promise对象，这是Es6promise内部封装好的，我们看不到，

        axios.get('/api/index.json')

          //1、getHomeInfoSucc本身是一个函数，所以可以直接放在then中作为第一个回调函数

          .then(this.getHomeInfoSucc)

      },

      //3、只要知道，当get请求成功，则返回成功状态。后面then中的第一个回调函数，就会接收请求过来的数据

      getHomeInfoSucc(res){

        //4、res表示get数据请求后返回的数据，即res是我们自己定义的形参，接收实参值

        res = res.data

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

          const data = res.data

          // this.city = data.city

          this.swiperList = data.swiperList

          this.iconList = data.iconList

          this.recommendList = data.recommendList

          this.weekendList = data.weekendList

        }

        console.log(res)

      }

    },

    mounted(){

      //页面挂载好之后去执行getHomeInfo()这个函数

      this.getHomeInfo()

    }

  }

</script>

<style>

</style>

<template>

  <div class="header">

    <div class="header-left">

      <div class="iconfont back-icon">&#xe624;</div>

    </div>

    <div class="header-input">

      <span class="iconfont">&#xe632;</span>

      输入城市/景点/游玩主题</div>

    <router-link to="/city">  <!-- router-link是做页面跳转的内置组件 -->

      <div class="header-right">

        {{this.$store.state.city}}

        <span class="iconfont arrow-icon">&#xe64a;</span>

       </div>

    </router-link>

  </div>

</template>

<script>

  export default{

    name:'HomeHeader',

//     props: {

//       city : String

//

//     }

  }

</script>

<style scoped>

  // scoped属性限制这个header样式只对当前组件有效,不会对其他组件产生任何的影响

  // 样式里面引入样式不能直接import,需要前面加一个@符号

  //也可以直接使用@符号代表src文件夹,但是在css文件中一定要在@符号前面加上~

  @import '~@/assets/styles/varibles.styl'

  //@import '~styles/varibles.styl'

  .header

    display:flex

    line-height: .86rem

    background: $bgColor

    color: #fff

    .header-left

      width:.64rem

      float:left

      .back-icon

        text-align: center

        font-size: .4rem

    .header-input

      flex:1

      height: .64rem

      line-height: .64rem

      margin-top: .12rem

      margin-left: .2rem

      padding-left: .2rem

      background: #FFFFFF

      border-radius :.1rem

      color: #ccc

    .header-right

      width: 1.24rem

      float: right

      text-align: center

      color: #fff

      .arrow-icon

        margin-left: -.04rem

        font-size: .24rem

</style>

​

//main.js是项目的入口文件

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

// 引入了router，自动的帮你引入router文件夹下面的index.js文件

import router from './router'

import fastClick from 'fastclick'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import store from './store'

import './assets/styles/reset.css'

import './assets/styles/border.css'

import './assets/styles/iconfont.css'

import 'swiper/dist/css/swiper.css'

Vue.config.productionTip = false

//把fastClick绑定到document.body之上

fastClick.attach(document.body)

Vue.use(VueAwesomeSwiper)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

//路由就是根据网址的不同,返回不同的内容给用户