Vue组合式API中useRouter()无法获取路由实例？求解决方案

在Vue的<script setup>中编写以下代码：

<script setup>
import { useRouter } from 'vue-router'

const menus = useRouter();
console.log(menus);
</script>

执行后未获取到预期的路由实例，返回的对象如图所示：

你看到的Proxy对象就是vue-router提供的路由实例，Vue 3通过Proxy对路由实例做了响应式包装，所以控制台会显示成这种形式，完全不影响功能使用。你可以直接调用它的方法或访问属性：

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter();
// 示例：跳转指定路由
router.push('/target-page')
// 示例：获取当前路由的详细信息
console.log(router.currentRoute.value)
</script>

如果路由功能完全无法使用，检查以下配置是否正确：

• 确认已安装适配Vue 3的vue-router 4.x版本：

  npm install vue-router@4
  

• 在项目入口文件（如main.ts/main.js）中正确挂载路由实例：

  import { createApp } from 'vue'
  import { createRouter, createWebHistory } from 'vue-router'
  import App from './App.vue'
  // 导入自定义的路由规则列表
  import routes from './routes'
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  const app = createApp(App)
  // 必须调用app.use(router)完成路由的全局挂载
  app.use(router)
  app.mount('#app')
  

只有路由实例被正确挂载到Vue应用后，useRouter()才能返回可用的路由对象。

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