vue3全局判断页面重载

1.app.vue 通过onMounted()判断页面重载（app.vue）

import { onMounted } from 'vue';

onMounted(() => {

  console.log('调用了')

});

2.通过window.addEventListener监听页面刷新（main.js）

// 监听页面刷新事件
window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
  // 你可以在这里做任何你需要的处理
  console.log('页面即将刷新或关闭')
  // 可选：设置返回的消息，这样用户会看到确认对话框
  event.preventDefault()
  event.returnValue = ''
})

3.使用window判断页面刷新，设置全局变量（main.js）

app.config.globalProperties.$isPageRefreshed = false;
// 检查是否是页面刷新
if (window.performance) {
  console.log(performance.navigation);
  if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
    app.config.globalProperties.$isPageRefreshed = true;
    // 调用自定义方法
  }
}

还可以设置路由监听全局变量

import {watch， getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance();
// 监听当前路由
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if(newValue.fullPath=="xxx"){
      // console.log('newValue',newValue)
      if(proxy.$isPageRefreshed) {
        console.log('isPageRefreshed', proxy.$isPageRefreshed)
         //执行方法
      }
      
    }
  },
  { immediate: true }
)