Vue3如何在非组件工具函数中无参数访问Router？

一、为什么useRouter和inject在工具函数中返回undefined？ #

Vue3的组合式API（包括useRouter、inject、hasInjectionContext）必须在Vue的组件上下文或自定义组合式函数中调用。普通工具函数不属于这个上下文，因此无法获取注入内容，hasInjectionContext()会返回false。

二、在getFoo中访问Vue Router的可行方案 #

方案1：将工具函数改为自定义组合式函数 #

这是最符合Vue3设计理念的方案，无需全局变量，也不破坏HMR：

修改src/utils/foo：

import { useRouter } from 'vue-router'

// 遵循组合式函数命名规范，用use开头（可选但推荐）
export function useGetFoo() {
  const router = useRouter()
  // 现在可正常访问router实例
  console.log(router.currentRoute.value.path)
  return 'bar'
}

组件中调用：

import { useGetFoo } from 'src/utils/foo'

export default defineComponent({
  setup() {
    const fooBar = useGetFoo() // 在组件setup上下文里调用，合法
  }
})

方案2：通过全局容器挂载router实例 #

如果必须保持getFoo为普通函数，可通过全局容器（或window）挂载router实例：

步骤1：在main.ts中挂载router到全局

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)

// 方式A：挂载到window（仅浏览器环境适用）
window.$router = router

// 方式B：自定义全局容器模块（更安全，支持跨环境）
// 创建src/utils/globalContainer.js
// export const globalContainer = {}
// 然后在这里导入并挂载：
// import { globalContainer } from './utils/globalContainer'
// globalContainer.router = router

步骤2：在getFoo中访问

export function getFoo() {
  // 方式A：用window
  const router = window.$router
  
  // 方式B：用自定义全局容器
  // import { globalContainer } from './globalContainer'
  // const router = globalContainer.router
  
  console.log(router)
  return 'bar'
}

三、Vue3中实现全局变量的常用方式 #

• app.config.globalProperties：官方推荐的全局属性挂载方式，Options API中可通过this.$xxx访问；在setup中可通过getCurrentInstance().appContext.config.globalProperties.$xxx访问（需在组件上下文调用）。
• 全局对象（如window）：直接挂载到浏览器全局对象，任何地方都能访问，但污染全局命名空间，不适合SSR/跨端项目。
• 自定义全局容器模块：创建独立模块导出一个对象，在main.ts中挂载需要全局访问的实例（如router、store），其他地方导入模块即可访问，安全且跨环境友好。
• 全局provide/inject：在main.ts中通过app.provide('key', value)注入全局内容，仅能在组件上下文或组合式函数中用inject('key')获取，普通工具函数无法使用。

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