element轮播图实现点击图片切换路由

1. 确保已经安装了elementui，并且注册好了路由
   elementui官网（安装和轮播组件文档都有详细说明，不赘述）

2. 开始改造vue组件

• html部分
  • router-link标签@click事件，绑定的事件无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的

//html部分
<template>
	<div>
		<el-carousel :interval="4000" type="card" height="200px"  ref="carousel" @click.native="linkTo">
		<!---注意：@click后加.native--->
        	<el-carousel-item v-for="item in imgs" :key="item.url">
          		<img :src="item.url"/>
        	</el-carousel-item>
     	 </el-carousel>
	</div>
</template>

• JS部分
  • 图片显示问题：用require(’ ')，
  • 关于图片引入的格式：
    '…/assets/image/qqgroup.jpg’是绝对路径引入。如果以后图片移动了位置，代码也需要相应修改。
    '@/assets/image/qqgroup.jpg’是动态引入（我自己用有时候会报错有时候又不会，之前报错的时候没注意看错误提示，之后发现了再更新）

<script>
export default {
  name: "index",
  data() {
    return {
          imgs: [
          		 {url: require('../assets/image/qqgroup.jpg'), link: '/business/info_attchment_testyz'},
        		 {url: require('@/assets/image/qqgroup.jpg'), link: '/business/info_attchment_testjg'},
        		 //{url: require('图片地址'), link: '路由地址'},
      		]
    	};
  },
  
  methods: {
    linkTo () {  //跳转路由
      let activeIndex = this.$refs.carousel.activeIndex
      this.$router.push(this.imgs[activeIndex].link)
    }
  },
};
</script>

• CSS部分

//直接用的elementui提供的默认格式
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}