Vue2中如何在composable组合式函数内访问$router路由实例

你在setup中通过context获取根实例$router的写法是可行的，但独立组合式函数没有默认传入context参数，可以通过以下两种方案实现访问：

方案1：通过getCurrentInstance获取当前组件实例（通用方案） #

Composition API提供了getCurrentInstance方法，可以在setup/组合式函数的同步执行上下文里拿到当前挂载的组件实例，再从实例上取到挂载在原型的$router即可。

// Vue2 + @vue/composition-api 插件场景：从 '@vue/composition-api' 导入
// Vue3 原生场景：从 'vue' 导入
import { getCurrentInstance } from '@vue/composition-api'

export default function useLink() {
  const instance = getCurrentInstance()
  // Vue2 插件版取值
  const router = instance.root.$router
  // Vue3 原生版取值：const router = instance.proxy.$router

  // 正常使用router实例
  const goToPage = (path) => {
    router.push(path)
  }

  return {
    goToPage
  }
}

注意事项：

• getCurrentInstance必须在组合式函数/setup的同步执行阶段调用，不能放在setTimeout、接口异步回调等延迟执行的逻辑里调用，否则会返回null拿不到实例。
• 不同Vue版本下组件实例的结构有差异，取值时需要对应自己项目的Vue版本调整路径。

方案2：使用vue-router官方提供的useRouter钩子（推荐方案） #

如果你的vue-router版本支持组合式API，优先直接用官方封装好的useRouter方法，不需要手动处理实例兼容问题，写法更稳定。

// Vue2 + vue-router@3.6+ 场景：从 'vue-router/composables' 导入
// Vue3 + vue-router@4 场景：从 'vue-router' 导入
import { useRouter } from 'vue-router/composables'

export default function useLink() {
  const router = useRouter()

  const goToPage = (path) => {
    router.push(path)
  }

  return {
    goToPage
  }
}

提示：如果项目路由版本支持组合式API，优先选方案2，避免不同Vue版本下实例结构差异导致的取值报错。

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