我正在使用Vue.js和vue-router，并对'beforeRouteLeave'导航防范有疑问。当用户单击“取消”按钮时，我将其用于对ProductDetail组件中的产品对象进行脏检查（因此，如果存在未保存的更改，我可以建立确认对话框）。只要用户单击“取消”按钮，它就可以正常工作，这会将路径更改为“/ product / list”（来自“/ product / detail”）。但是，如果用户直接在浏览器的地址栏中输入“/ product / list”，则不会调用它。这是一个小麻烦，而不是一个显示阻止，但我只是想知道是否有一些方法我可以解决这个问题，让它的行为方式与链接或按钮点击相同？
进一步澄清，视情况而定：
在相关组件中，单击“取消”按钮会调用this.$router.push({name:'product-list'})，这是在路由器配置中使用路径'/ product / list'定义的。发生这种情况时，在路由更改之前成功调用防护'beforeRouteLeave'。但是，如果用户直接在地址栏中输入“/ product / list”并更改路径，则绕过我的组件的“beforeRouteLeave”。
答案 0 :(得分：1)
如果您想在不保存更改的情况下阻止保留链接，请尝试window.onbeforeunload https://jsfiddle.net/z11fe07p/578/。
window.onbeforeunload = function(){
return "Are you sure you want to close the window?";
}