項(xiàng)目是用的vue+element ，需求是當(dāng)頁(yè)面中有正在編輯的內(nèi)容時(shí)，離開頁(yè)面前要提示“頁(yè)面未保存是否離開”的功能。

我目前找到兩種解決方案但是都不是很完美：

第一種：
直接用vueRouter官網(wǎng)的例子

       beforeRouteLeave (to, from , next) {
          const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
          if (answer) {
            next()
          } else {
            next(false)
          }
        }
      

效果如下：

這種方法有兩個(gè)問(wèn)題，一是樣式不可控只能更改一下里面的提示內(nèi)容。二是只在瀏覽器刷新或者關(guān)閉瀏覽器的時(shí)候沒(méi)有提示。

第二種：
還是用beforeRouteLeave

     beforeRouteLeave: function(to, from , next){
         next(false)
        if(this.activeName == 'first' && !this.message.message1){
            this.$confirm('您還未保存頁(yè)面內(nèi)容，確定需要提出嗎?', '提示', {
                confirmButtonText: '確定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 選擇確定
                next()
            })
        }
     }
     

效果如下：

這種方法樣式可以控制，但是問(wèn)題還是一樣，不但不在關(guān)閉瀏覽器和刷新瀏覽器時(shí)彈出，而且在點(diǎn)擊瀏覽器后退事件時(shí)，這個(gè)彈出框還會(huì)閃一下。。

其實(shí)我還在網(wǎng)上看到有用這個(gè)的：

 //綁定beforeunload事件
window.onbeforeunload = function (event) {
    event = event || window.event;
    event.returnValue = '您輸入的內(nèi)容尚未保存，確定離開此頁(yè)面嗎？';
}

但是這個(gè)感覺(jué)也不是我要的，各位有什么解決辦法沒(méi)有，如果能把第二種，點(diǎn)擊瀏覽器后退閃一下這個(gè)問(wèn)題修好，第二種倒是也能勉強(qiáng)用。。多謝