vue如何在用户要关闭当前网页时弹出提示的实现

 更新时间:2020年05月31日 14:49:22   作者:晴天有点孤单  
这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现,分享给大家,具体如下:

效果如下图

正常 js 页面处理方式

window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
  e.returnValue = '关闭提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
}; 

vue 中处理方式

let _this = this
  window.onbeforeunload = function (e) {
   if (_this.$route.name == "dyyPerformanceCenterSale") {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
     e.returnValue = '关闭提示1111';
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示222';
   } else {
    window.onbeforeunload = null
   }
  };

针对很多同学说的没有实现 ,我这里在详细描述一下 方法写在 mounted里面 ,然后 记得把route name替换成自己当前页面的

到此这篇关于vue如何在用户要关闭当前网页时弹出提示的实现的文章就介绍到这了,更多相关vue关闭当前网页时弹出提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue使用iframe实现浏览器打印兼容性优化

    Vue使用iframe实现浏览器打印兼容性优化

    在前端开发中,打印功能是一个常见的需求,但不同浏览器对打印样式的支持差异较大,本文我们来看看Vue如何使用iframe实现浏览器打印兼容性优化吧
    2025-04-04
  • vue 动态修改a标签的样式的方法

    vue 动态修改a标签的样式的方法

    这篇文章主要介绍了vue 动态修改a标签的样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue按需引入element Transfer 穿梭框

    vue按需引入element Transfer 穿梭框

    这篇文章主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下
    2017-09-09
  • Vue如何实现el-table多选样式变为单选效果

    Vue如何实现el-table多选样式变为单选效果

    这篇文章主要介绍了Vue如何实现el-table多选样式变为单选效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue+elementui(对话框中form表单的reset问题)

    vue+elementui(对话框中form表单的reset问题)

    这篇文章主要介绍了vue+elementui(对话框中form表单的reset问题),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 在 Vue 中使用 JSX 及使用它的原因浅析

    在 Vue 中使用 JSX 及使用它的原因浅析

    这篇文章主要介绍了在 Vue 中使用 JSX 及使用它的原因浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue超出文本框显示省略号鼠标滑入显示全部的实现方法

    Vue超出文本框显示省略号鼠标滑入显示全部的实现方法

    在Vue项目中经常需要处理文本内容过长的情况,这篇文章主要给大家介绍了关于Vue超出文本框显示省略号鼠标滑入显示全部的实现方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • Vue 关于Store的用法小结

    Vue 关于Store的用法小结

    Vue Store是的状态管理模式和库,它提供了一种集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要介绍了Vue 关于Store的用法,需要的朋友可以参考下
    2024-08-08
  • 详解Vue3中如何使用动态组件

    详解Vue3中如何使用动态组件

    在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用,感兴趣的小伙伴可以了解下
    2024-01-01
  • vue3使用vue-count-to组件的实现

    vue3使用vue-count-to组件的实现

    这篇文章主要介绍了vue3使用vue-count-to组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论