vue中页面跳转当前页无法重渲染问题

前两天用vue、element做了做了个公司官网的项目，遇到了些问题，有的是vue的问题，有的则是element的导致的。网上查了好多，也问了经常用vue写项目的朋友，问题总算是都解决了，在这里记录一下。

1. 页面跳转当前页，报错且无法重渲染

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 解决报错👇
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return routerPush.call(this, location).catch(error => error)
}

// APP.VUE

<template>
  <div id="app">
  					// 解决无法重渲染问题
    <router-view :key="$route.query.id"/>
  </div>
</template>

2. 事件绑定…
   

轮播图各位应该都做过，无论使用插件还是自己去封装。如图的轮播是利用Swiper插件进行开发的，这种样式的轮播我也是第一次做，中间尺寸正常，两边逐渐减小，当数量不足时，重复展示多张，以此达到循环轮播。不过这个Swiper插件会存在问题，如果给每个图添加事件，比如click事件，当你进行点击的时候，很有可能不会触发。

在开发中也是困扰了我许久，最终把点击事件加到了最外层的容器上，通过e.target解决了这个问题。可以把索引或者每条数据的key作为dom的自定义属性，这样可以让事件更加精确。