Vue3的组件卸载，页面路由切换，页面退出时的事件处理 2024

参考Vue3的生命周期事件：
https://vuejs.org/guide/essentials/lifecycle.html

页面退出

当我们关闭某个页面时，希望在关闭前做些操作，这里需要监听到退出的事件，页面的关闭事件为beforeunload：

mounted: function () {    
        window.addEventListener("beforeunload", this.doBeforeUnloadAction);
}

监听到退出事件后，具体操作doBeforeUnloadAction如下：

doBeforeUnloadAction(e: any = null) {
            e && e.preventDefault();
            console.log(' --->before unload<---')
 }

对于 e.preventDefault() 是用于阻止默认退出事件。

这里其实是在页面或组件挂载（mounted）事件里增加对页面的监听事件处理，所以在页面或组件卸载时，需要去掉这个事件的监听处理，参考下章节。

组件或页面卸载

组件或页面卸载有两个事件：beforeUnmount（卸载前事件）和unmounted （卸载完成事件）。对于上文中我们监控到的退出事件，在卸载完成后，对其相应的事件做移出操作。

unmounted: function () {
        window.removeEventListener("beforeunload", this.doBeforeUnloadAction)
},

卸载前事件

beforeUnmount: function () {
        console.log('befor unmount...')
}

页面路由切换事件

页面路由切换事件为onBeforeRouteLeave

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

https://stackoverflow.com/questions/75341847/how-to-use-onbeforerouteleave-in-nuxt
https://stackoverflow.com/questions/45293861/how-do-i-warn-a-user-of-unsaved-changes-before-leaving-a-page-in-vue