使用Element实现轮播图组件（el-carousel）的点击事件，切换到内容页

使用el-carousel的时候发现默认的@click.native 定义点击事件，当点击当前图片的时候获取当前图片的activeIndex，这个属性是该组件的data中的一个参数，表明当前显示的图片的index，借用这个参数我们可以进行相应的页面跳转具体代码如下：
1、首先将图片的连接和要跳转的连接放到指定的集合imgs里

 data: function () {
    return {
      platform: 'pc',
      imgs: [
        {url: require('../../assets/image/lun_imgs/201809110947xg7zo5.jpg'), link: '/content1'},
        {url: require('../../assets/image/lun_imgs/201809110948yiapy7.jpg'), link: '/content1'},
        {url: require('../../assets/image/lun_imgs/201809110956vz3vel.jpg'), link: '/content1'},
        {url: require('../../assets/image/lun_imgs/201812260908m7s6g1.jpg'), link: '/content1'},
        {url: require('../../assets/image/lun_imgs/2018091104025oqbch.jpg'), link: '/content1'}
      ]
    }
  },

2、定义跳转的方法，$refs是vue的内置对象，是所有的代理对象的集合

 methods: {
    linkTo () {
      let activeIndex = this.$refs.carousel.activeIndex
      this.$router.push(this.imgs[activeIndex].link)
    }
  }

3、将该元素定义成代理，并使用@click.native定义点击事件

 <el-carousel class="lun_imgs" ref="carousel" @click.native="linkTo">
           <el-carousel-item class="lun_img" v-for="item in imgs" v-bind:key="item.url" >
             <img :src="item.url"/>
           </el-carousel-item>
         </el-carousel>