Vue 3中如何在Vue组件之外访问路由器？

Question

假设我在 Vue 组件中使用了一个不带任何参数的辅助函数：

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

export default defineComponent({
  setup() {
    const fooBar = getFoo()
  }
(...)

src/utils/foo

：

export function getFoo() {
  // I need to access Vue router here
  return 'bar'
}

如何在

getFoo

函数中访问 Vue Router 而无需显式将其作为参数传递？
（并且无需直接导入

router

文件，因为它包含破坏 HMR 的代码）

我尝试了

useRouter()

和

provide/inject

，但它返回了

undefined

：

import { useRouter } from 'vue-router'

export function getFoo() {
  // I need to access Vue router here

  // attempt nr 1
  const router = useRouter() // returns undefined

  // attempt nr 2
  const router2 = inject('router') // returns undefined (I already did app.provide('router', router)` in my main.ts)
  console.log(hasInjectionContext()) // returns "false", why?

  return 'bar'
}

或者，在 Vue 3 中提供真正的全局变量还有哪些其他方法？

Answer 1

我已经弄清楚了。显然，异步使用时

useRouter

无法正常工作。作为解决方法，可以在可组合项中同步调用

useRouter

：

import { useRouter } from 'vue-router'

export default function useFoo() {
    const router = useRouter() // returns Router

    function getFoo() {
        console.log(router) // router is accessible!

        return 'bar'
    }
}

并在组件中使用：

export default defineComponent({
    setup() {
        const { getFoo } = useFoo() // synchronous call

        const foo = getFoo() // works synchronously

        const onButtonClick = () => {
          // can be used asynchronously as well (previous attempts where not working asynchronously)
          const fooAsync = getFoo()
        }
})