在Vue 3 Composition API中，如何正确注入$router到组件？

在Vue 3的Composition API中，为了在组件内部正确注入`$router`，你需要在`setup()`钩子函数中导入`useContext`, `useRef`, 或者`provide/inject`功能来获取或提供`router`。

1. **通过`useContext`**: 如果你使用了全局路由守卫，可以使用`provideRouter`创建一个`AppContext`，然后在每个需要`$router`的地方用`useContext(AppContext)`来获取它。

   import { provideRouter, createWebHistory, Route, Link } from '@vue-router'
   
   const routes = [/* your routes here */]
   
   setup() {
     const router = provideRouter({
       history: createWebHistory(),
       routes,
     })
   
     const routerData = useContext(AppContext) // 获取router实例
     // ...
   }

2. **通过`useRef`或`reactive`**: 如果你想在局部管理`$router`，你可以使用`useRef`来存储它。

   import { useRouter } from 'vue-router'

   setup() {
     const routerRef = useRef(null)
     const router = useRouter()
     routerRef.value = router
   
     // 在组件内使用 routerRef.value
     // ...
   }

3. **通过`provide/inject`**: 如果你想在整个应用范围内共享`$router`实例，可以在根组件里`provide`，然后其他组件`inject`。

   import { provide, inject } from 'vue'

   setup() {
     provide('router', useRouter())

     // 其他组件里注入
     const router = inject('router')
     // ...
   }

记住要在适当的时候导入`vue-router`包，如`import { useRouter } from 'vue-router'`。