[筆記] Vue 監聽頁面離開、關閉的方法 @地瓜大的飛翔旅程

章節連結

內容
程式碼
參考資料

近期在 Vue 專案中於編輯頁面，要判斷使用者是否離開或是關閉頁面，並跳出提示訊息。這邊筆記下原理和程式碼。

內容

1. 透過 Vue-Router 或是一般連結所造成的切換 – 使用 beforeRouteLeave 加上 window.confirm 來確認
2. 頁面關閉的話則透過在 mounted 階段將一個有 return 的函式給 window.onbeforeunload，並搭配 beforeDestroy 階段將其設成 null，你就可以在關閉視窗時，呼叫到 beforeRouteLeave 的方法

程式碼

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
    name: 'Demo',
    beforeRouteLeave (to, from, next) {
        const acceptToLeave = window.confirm('變更尚未儲存，確定要離開嗎？')
        acceptToLeave
            ? next()
            : next(false)
    },
    async mounted (this:any) {
        try {
            window.onbeforeunload = () => {
                return ''
            }
        } catch (err) {
            console.log(err)
        }
    },
    beforeDestroy () {
        window.onbeforeunload = null
    }
})
</script>

import Vue from 'vue'

export default Vue.extend({

name: 'Demo',

beforeRouteLeave (to, from, next) {

const acceptToLeave = window.confirm('變更尚未儲存，確定要離開嗎？')

acceptToLeave

? next()

: next(false)

async mounted (this:any) {

try {

window.onbeforeunload = () => {

return ''

}

} catch (err) {

console.log(err)

}

beforeDestroy () {

window.onbeforeunload = null

}

})

</script>

參考資料

1. Vue踩坑之旅（二）—— 监听页面刷新和关闭

按讚加入粉絲團

內容

程式碼

參考資料

延伸閱讀