vue3页面离开提示hooks

新建useNavigationPrompt.ts

import { onBeforeUnmount, onMounted } from 'vue'

export function useNavigationPrompt(message: string): void {
  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    e.preventDefault()
    e.returnValue = message
    return message
  }

  const handlePopState = () => {
    // eslint-disable-next-line no-alert
    window.confirm(message)
  }

  onMounted(() => {
    window.addEventListener('beforeunload', handleBeforeUnload)
    window.addEventListener('popstate', handlePopState)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('beforeunload', handleBeforeUnload)
    window.removeEventListener('popstate', handlePopState)
  })
}

使用方法

import { useNavigationPrompt } from '~/hooks/useNavigationPrompt'
useNavigationPrompt('你确定要离开这个页面吗？')