Vue 3 中 provide/inject 不用于路由守卫本身，而是将守卫执行后的状态（如 isLoading、redirect）响应式注入 Layout 组件，实现轻量、解耦、作用域受限的状态共享，避免全局状态滥用。
Vue 3 中依赖注入（provide / inject）本身不直接用于“路由守卫状态”的共享，但它可以配合路由守卫，把守卫中产生的状态（比如登录态、权限结果、加载标识）安全、响应式地传递给布局组件（如 Layout.vue），避免重复判断或 props 层层透传。
为什么不用全局状态？
全局状态（如 Pinia）适合跨模块共享，但布局组件往往只需要知道“当前导航是否被拦截”“用户是否有权访问”这类轻量、瞬时、与导航强绑定的状态。用 provide/inject 更轻量、更解耦，且天然支持组件树作用域——比如只让嵌套在 RouterView 下的 Layout 感知本次导航的守卫结果，不影响其他无关区域。
核心思路：在路由守卫中 provide，Layout 中 inject
关键不是“守卫本身被注入”，而是把守卫执行后的结果状态（如 isAuthLoading、authError、redirectTarget）通过依赖注入暴露出去：
- 在
router.beforeEach中创建一个响应式对象（用ref或reactive），记录本次导航的校验状态 - 调用
app.provide('routeGuardState', state)（通常在main.ts创建 app 后、挂载前） - 在 Layout 组件中用
inject('routeGuardState')获取并响应式监听
实际写法示例
1. 在 main.ts 初始化提供者：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 创建可响应的守卫状态容器
const routeGuardState = reactive({
isLoading: false,
error: null as string | null,
redirect: null as string | null
})
// 全局前置守卫中更新它
router.beforeEach((to, from) => {
routeGuardState.isLoading = true
routeGuardState.error = null
routeGuardState.redirect = null
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
routeGuardState.redirect = '/login'
routeGuardState.isLoading = false
return { name: 'Login' }
}
// 模拟异步校验（如接口鉴权）
setTimeout(() => {
routeGuardState.isLoading = false
}, 300)
})
// 提供给整个应用（Layout 等可 inject）
app.provide('routeGuardState', routeGuardState)
app.use(router).mount('#app')
2. 在 Layout.vue 中消费：
<template>
<div class="layout">
<header v-if="state.isLoading">正在验证权限...</header>
<header v-else-if="state.redirect">即将跳转至登录页</header>
<router-view />
</div>
</template>
<script setup>
import { inject } from 'vue'
const state = inject('routeGuardState')
</script>
注意边界和替代方案
这种模式适用于守卫逻辑简单、状态生命周期与单次导航对齐的场景。如果需要持久化（如登录态长期有效）、跨路由复用或复杂权限计算，仍建议用 Pinia + 路由元信息（meta）组合管理；provide/inject 更适合作为“守卫副产物”的临时广播通道，而非主状态源。
