vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn)

更新時(shí)間：2020年05月31日 14:49:22 作者：晴天有點(diǎn)孤單

這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn)，分享給大家，具體如下：

效果如下圖

正常 js 頁面處理方式

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

vue 中處理方式

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

針對(duì)很多同學(xué)說的沒有實(shí)現(xiàn) ，我這里在詳細(xì)描述一下方法寫在 mounted里面，然后記得把route name替換成自己當(dāng)前頁面的

到此這篇關(guān)于vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化
在前端開發(fā)中,打印功能是一個(gè)常見的需求,但不同瀏覽器對(duì)打印樣式的支持差異較大,本文我們來看看Vue如何使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化吧
2025-04-04
vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法
這篇文章主要介紹了vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
vue按需引入element Transfer 穿梭框
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下
2017-09-09
Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果
這篇文章主要介紹了Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue+elementui(對(duì)話框中form表單的reset問題)
這篇文章主要介紹了vue+elementui(對(duì)話框中form表單的reset問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
在 Vue 中使用 JSX 及使用它的原因淺析
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
在Vue項(xiàng)目中經(jīng)常需要處理文本內(nèi)容過長的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
Vue?關(guān)于Store的用法小結(jié)
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
2024-08-08
詳解Vue3中如何使用動(dòng)態(tài)組件
在?Vue?3?中,動(dòng)態(tài)組件是一種允許在運(yùn)行時(shí)動(dòng)態(tài)切換組件的機(jī)制,本文主要為大家詳細(xì)介紹了動(dòng)態(tài)組件在Vue3中的具體使用,感興趣的小伙伴可以了解下
2024-01-01
vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12