如何避免面板弹出重叠

这里谈三种方法，当然使用的是路由<router-link>。<div>同样也可以控制。

在进行页面功能的实现的时候，我们常常会遇到这样的情况，点击按钮出来一个弹窗，再点击弹窗里面的内容，跳到详情页，这时问题就来了，弹窗如果不关闭，影响详情页的浏览，所以，我们要关闭弹窗！！！！！

这是场景。下面讲述方法：

1. 使用click事件，在组件之间层层传递函数，控制弹窗显示的变量favVisible的布尔值。

2. 使用路由监控，这个方法的前提条件是使用的是路由在页面里面。监控方法如下：

watch： {
$route (val) {
if (this.favVisible) {
this.favVisible = false
}
}
}

当然使用的是vue

3. 第三种方法，也是比较厉害的。名叫阻止冒泡。对，就是你在阻止各种点击之间乱窜的阻止冒泡方法。在vue文档里有一处定义事件处理器，里面有一个事件修饰符。甩上链接自己看：http://cn.vuejs.org/v2/guide/events.html#事件修饰符。那是阻止冒泡的方法。

上代码吧，自己看：

closeFavor (e) {
if(closest(e.target, '.favorite-item')) {
this.favVisible = false
}
}

上述代码的favorite-item，就是<router-link>标签里面定义的类。这种方法好在哪里呢，就是减少了组件之间方法的层层传递。

这样就完事了，附文字一段，洗刷焦躁的心。

美在于发现，在于邂逅，是机缘。 

凌晨四点钟，看到海棠花未眠。

即使和幽灵同处地狱也能心安理得；随便什么时候都能拔腿而去。

这就是我，一个天涯孤客心底所拥有的自由。

——川端康成 《花未眠》