Vue应用初始加载Loader优化咨询：避免切回标签页重复触发

针对你遇到的「全局布局mounted钩子在标签页闲置后激活时重复触发Loader」问题，这里提供几个实用的优化方案：

方案1：全局状态标记首次加载完成 #

借助全局状态管理（如Pinia/Vuex）记录是否完成首次加载，仅在首次进入时触发Loader逻辑：

示例（Pinia）： #

1. 创建状态管理模块：

// stores/app.js
import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    isFirstLoaded: false // 标记是否完成首次加载
  }),
  actions: {
    markAsLoaded() {
      this.isFirstLoaded = true
    }
  }
})

2. 在全局布局组件中修改逻辑：

<template>
  <div v-if="!isFirstLoaded" class="loader">加载中...</div>
  <router-view v-else />
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import { onMounted } from 'vue'

const appStore = useAppStore()

onMounted(async () => {
  // 仅首次加载时执行逻辑
  if (!appStore.isFirstLoaded) {
    // 这里放你的初始化加载逻辑（如接口请求、资源预加载）
    await initApp()
    // 标记为已完成首次加载
    appStore.markAsLoaded()
  }
})

async function initApp() {
  // 模拟初始化操作
  await new Promise(resolve => setTimeout(resolve, 1000))
}
</script>

方案2：结合页面可见性事件区分场景 #

利用浏览器的visibilitychange事件，区分「首次应用加载」和「标签页激活」两种场景：

<script setup>
import { onMounted, onUnmounted } from 'vue'
let isFirstLoad = true

function handleVisibilityChange() {
  // 仅首次加载且页面可见时触发Loader
  if (isFirstLoad && document.visibilityState === 'visible') {
    initApp().then(() => {
      isFirstLoad = false
    })
  }
}

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange)
  // 首次加载时主动触发一次
  handleVisibilityChange()
})

onUnmounted(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})

async function initApp() {
  // 初始化逻辑
}
</script>

方案3：将Loader逻辑移至应用入口 #

直接在应用入口文件（main.js）中控制Loader，仅在应用首次挂载前后执行，完全避免页面切换的影响：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 显示Loader
document.body.classList.add('loading')

async function bootstrap() {
  // 执行全局初始化逻辑（如接口请求、配置加载）
  await initGlobalResources()
  
  const app = createApp(App)
  app.mount('#app')
  
  // 初始化完成后隐藏Loader
  document.body.classList.remove('loading')
}

bootstrap()

async function initGlobalResources() {
  // 模拟全局资源加载
  await new Promise(resolve => setTimeout(resolve, 1000))
}

对应的CSS（可选）：

body.loading {
  overflow: hidden;
}
body.loading .loader {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #fff;
  z-index: 9999;
}

内容的提问来源于stack exchange，提问作者laventnc