Vue Router守卫无法访问this或app是因为其为纯函数、无组件上下文，需显式传入app实例；推荐方案是在createRouter前定义app并闭包捕获，在beforeEach中直接使用app.config.globalProperties。
在 Vue 3 的 Composition API 和 Vue Router 4 中，路由钩子（如 beforeEach、beforeEnter、onBeforeRouteUpdate 等）运行在组件实例之外，**无法直接访问组件内部的 app.config.globalProperties 或通过 this 访问全局属性**。但你仍可通过“路由实例持有 app 引用”这一隐式机制，间接获取全局配置、插件暴露的方法（如 $http、$message）等。
为什么路由钩子里拿不到 this 或 app？
Vue Router 的导航守卫是纯函数，不绑定任何组件上下文。它们在应用初始化阶段注册，早于组件挂载，因此不具备响应式上下文或 this 指向。Vue 3 更彻底地移除了 this，依赖 getCurrentInstance()（仅限 setup 内部）或显式传入的 app 实例。
方案一：在创建 router 时显式保存 app 引用（推荐）
这是最清晰、可维护性最强的方式——把 app 实例作为闭包变量传入 router 配置，供守卫使用：
- 创建 router 前先定义 app，再用该 app 初始化 router
- 在
createRouter的选项中，将 app 作为闭包变量捕获 - 在
beforeEach等守卫中，直接使用该 app 实例调用config.globalProperties
示例代码：
立即学习“前端免费学习笔记（深入）”；
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
<p>const app = createApp(App)</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9767" title="vue-admin-change-reviewer"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="vue-admin-change-reviewer" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9767" title="vue-admin-change-reviewer">vue-admin-change-reviewer</a>
<p>审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。</p>
</div>
<a href="/xiazai/skill9767" title="vue-admin-change-reviewer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 全局属性注入
app.config.globalProperties.$api = axios.create({ baseURL: '/api' })
app.config.globalProperties.$toast = (msg) => { /<em> ... </em>/ }</p><p>// 创建 router，并捕获 app
const router = createRouter({
// ...其他配置
})</p><p>// 在 router 创建后、app.mount 前注册守卫
router.beforeEach((to, from, next) => {
const globalProps = app.config.globalProperties
// ✅ 安全访问全局属性
globalProps.$toast(<code>导航到 ${to.path}</code>)
globalProps.$api.get('/user').then(/<em> ... </em>/)
next()
})</p><p>app.use(router)
app.mount('#app')
方案二：通过 provide / inject 在 router 层透传（适合大型项目）
若你已在 app 的根组件中用 provide 注入了服务对象（如 ApiClient、MessageService），可在路由守卫中通过 getCurrentInstance() + inject 获取——但注意：这仅在守卫触发时存在活跃组件实例的前提下才可行（如 beforeRouteEnter 不适用，因为组件尚未创建）。
更稳妥的做法是：在 setup() 中提前 inject 并缓存，或改用方案一。
方案三：挂载到 router 实例自身（轻量级临时方案）
如果你不想修改 app 创建流程，也可在 app.use(router) 后手动将引用挂到 router 上：
app.use(router) // 挂载引用（非响应式，仅作取值用） router.app = app
然后在守卫中使用：
router.beforeEach((to, from, next) => {
const $ = router.app.config.globalProperties
$.log && $.log('route guard triggered')
next()
})
⚠️ 注意：此方式属于“打补丁”，不推荐用于新项目；且需确保 app.use(router) 已执行，否则 router.app 为 undefined。
不复杂但容易忽略的关键点是：路由守卫本质是独立函数，它和 Vue 实例的关系必须由开发者显式建立。只要在初始化阶段把 app 引用稳稳地“交到”路由逻辑里，后续访问全局属性就水到渠成。
