1、页面销毁时触发（可取消本次路由跳转）
优点：
1、唤起浏览器自带确认弹窗
2、主要监听浏览自带和键盘快捷键的前进后退功能，以及tab刷新和关闭
缺点：使用了单页面应用（SPA）框架：在Vue、React等单页面应用（SPA）框架中，页面的前进和后退是通过JavaScript控制的，不会导致页面重新加载，因此不会触发beforeunload事件。在这种情况下，可以使用路由守卫或相应的API来处理页面离开的逻辑。
const handleBeforeUnload = (e: any) => {
const message = '你确定要离开页面吗？'
e.returnValue = message // 兼容性设置 message必须有值才可以触发弹窗
}
onMounted(() => {
window.addEventListener('beforeunload', handleBeforeUnload)
})
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', handleBeforeUnload)
})
2、浏览自带和键盘快捷键的前进后退功能触发监听以及其它路由跳转（可取消本次路由跳转）
// 组件内的路由守卫
beforeRouteLeave(to: any, from: any, next: any) {
},
3、专一监听浏览器自带的回退功能 (不可取消本次路由跳转）
const handlePopstate = (e: any) => {}
onMounted(() => {
// 有时事件无法触发，加个beforeRouteLeave看看？
window.addEventListener('popstate', handlePopstate)
})
onBeforeUnmount(() => {
window.removeEventListener('popstate', handlePopstate)
})
