背景：1.这几天遇到一个小需求：用户填写表格没有保存，点击其他按钮提示是否保存。如果不是，请离开当前页面并转到下一步。当产品提出这个要求的时候，我心里没什么感觉。我想，这不是很简单吗~~~在vue-router组件中使用beforeRouteLeave守卫即可。然而，它还太年轻。所以，总结到这里，给自己留个记录。项目介绍：我们的项目基于Vue全家桶开发，将静态文件和elector打包成app。本次需要的页面，排版如下：传统排版。用户在内容区3填写表单，点击区域12后，需要提示用户是否保存。一开始我的开发思路是直接在vue-router组件中调用guard，离开时判断。然而，事情并没有那么简单~~：beforeRouteLeave只能在路由离开前“拦截”路由的变化。在我们的项目中，点击左侧列表区域2和header菜单区域1，会修改vuex的状态，导致区域3的基础数据发生变化，从而触发刷新内容区域的请求。也就是说：beforeRouteLeave不能达到预期的效果。因为beforeRouteLeave不能阻止js触发的事件。如果你想停止事件，相信你可以很自然地想到：捕获和冒泡。但是新的问题又来了。即使阻止了事件的进行，需求中的下一步应该怎么办？我的想法是：在阻止事件传播的时候，记录事件的发生，当用户确认不保存取消时，继续让事件的targrt执行之前的事件。具体方法：在vuex中添加一个状态变量A，用于识别表单数据是否在最外层区域12被修改，绑定函数，执行事件捕获，根据函数中的A判断是否防止冒泡。如果单击了12区域，则继续下一步。判断表单数据是否被修改。如果修改，则分发中心事件，传递参数事件。让内容区自己处理提示框，等待用户确认。verifyProjuctDataHandler(e){if(A){e.stopPropagation()console.log('分发点击其他区域事件');window.eventHub.$emit('clickOtherArea',e)returnfalse}},4.如果用户点击取消后，执行相应的操作，执行需求并与分发的event事件进行下一步，获取点击坐标，并模拟操作。效果实现：模拟事件暂停，继续执行。//模拟鼠标点击坐标(x,y)functionclickPoint(x,y){varev=newMouseEvent('click',{'view':window,'bubbles':true,'cancelable':true,'clientX':x,'clientY':y});varel=document.elementFromPoint(x,y);el.dispatchEvent(ev);至此，需求的基本开发就完成了。如果谁有更好的解决办法，欢迎留言~~~
