为什么要让用户选择是否离开页面？如果用户填写了很多数据，不小心点击了其他a标签或者没有判断就关闭了浏览器，那么用户数据就直接丢失了。.href，一个标签，关闭浏览器或当前标签页等...需要判断数据是否与初始化一致（用户是否填表...）用户选择离开到继续逻辑，否则，正式启动先启动要知道一个事件：onbeforeunload，MDN的描述是：当浏览器窗口关闭或刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。HTML规范指出，在此事件中调用window.alert()、window.confirm()和window.prompt()方法可能无效。练习它。在微信♂编辑界面，输入一些内容后，点击关闭标签页此时出现弹窗删除所有内容后，返回到最初输入的数据，点击关闭标签页，直接关闭。没有提示看插件显示。这个编辑器界面没有使用react和vue。应该是jq测试去控制台，没错，猜对了（小编太🐂，你不想关注一下吗？）回到项目，添加beforeunload事件，添加脚本标签点击关闭，或者此时输入window.location.href="xxx.ooo.com"，那么问题就出现了，如果我通过一个tab跳转呢？通过一个标签跳转（+前端路由）我用的是dva/router，引入相关组件import{Prompt}from'dva/router';....render(){return}引入Prompt组件，传入消息是一个方法，看这个方法publichandlePrompt=(location:Location)=>{returnfalse;};然后我们使用dva/router的history.push方法跳转到前端路由，不能跳转，因为handlePrompt总是返回false，除非返回true，否则这个页面无法通过a标签跳转。..这个时候不管怎么点击一键打开都没有效果，所以改成returntrue试试试试publichandlePrompt=(location:Location)=>{returntrue;};问题一跳就结束了，如何判断是否需要跳转呢？参考微信公众号编辑器，如果你编辑了内容（和最初输入的数据不一致），在页面中通过a标签跳转，会出现弹窗确认）就很简单了，我们使用antdModal组件，lodash的deepclone（深拷贝），_.isEqual(value,other)进行深度比较，判断两个值是否相等?注：isEqual方法支持比较数组，数组缓冲区，布尔值、日期对象、错误对象、映射、数字、对象对象、正则表达式、集合、字符串、符号和类型化数组。对象对象值与它们自己的属性进行比较，不包括继承和可枚举的属性。不支持函数和DOM节点比较。?实现思路在讲解组件初始化的时候，深拷贝一个表单数据存入组件中。当用户通过a标签离开页面时，会触发handlePrompt方法存储目标url。这时候使用isEqual比较当前数据和组件初始化表单数据是否一致，如果不一致，会出现弹窗，让用户选择是否离开代码实现//处理自定义退出弹窗handlePrompt=(location)=>{//如果当前保存为false，弹窗会提示用户进行保存操作if(!this.isSave){this.showModalSave(location);returnfalse;}returntrue;}//弹窗提示离开showModalSave=location=>{this.setState({modalVisible:true,location,});}//点击OK保存页面，routejumphandleSaveAuto=()=>{const{location}=this.state;const{history}=this.props;this.isSave=true;this.setState({modalVisible:false,});//处理保存操作，这里可以替换成点击确认后需要做的操作this.handleSavePaper('save','exit',location.pathname)}Leavelogic//取消路由跳转gotoNewUrl(url){const{dispatch,历史ory}=this.propsdispatch(routerRedux.push({pathname:url,}));}//点击取消关闭弹窗closeModalSave=()=>{const{location}=this.state;const{dispatch,history}=this.propsthis.isSave=true;this.setState({modalVisible:false,},()=>{this.gotoNewUrl(location.pathname)});}html结构即将离开当前页面，是否保存当前修改？
保存取消
