vue实现在用户关闭或刷新浏览器当前网页时弹出提示“系统可能不会保存您所做的更改”

1、首先先看一下效果图：2、实现步骤（1）在项目中打开想要出现如上效果的组件的vue文件（2）在script标签中写如下代码，但是记得要替换成自己的路由<script>export default {mounted () {let that = thiswindow.onbeforeunload = function (e) {if(that.$route.fullPath =="/r

Allison-L

9975人浏览 · 2020-05-12 16:37:54

Allison-L · 2020-05-12 16:37:54 发布

1、首先先看一下效果图：

2、实现步骤

（1）在项目中打开想要出现如上效果的组件的vue文件

（2）在script标签中写如下代码，但是记得要替换成自己的路由

<script>
export default {
    mounted () {
        let that = this
        window.onbeforeunload = function (e) {
            if(that.$route.fullPath =="/rich"){  // 注意这里要替换成自己的当前页面的路由
                e = e || window.event;
                // 兼容IE8和Firefox 4之前的版本
                if (e) {
                    e.returnValue = '关闭提示';
                }
                // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
                return '关闭提示';
            } else {
                window.onbeforeunload = null
            }
        };
    }
}
</script>

（3）保存好代码后刷新一下页面，即可看到效果。