---
name: vue-useroute-fix
description: 修复 Vue 3 中 useRoute() 在 computed() 内部调用导致的组件渲染失败问题
metadata:
  type: feedback
  created: 2026-07-11
---

# Vue 3 useRoute() 调用位置修复

## 问题描述

在前端页面中，Vue 组件无法正确渲染，页面主内容区域为空。

**错误信息：**
```
[Vue warn]: inject() can only be used inside setup() or functional components.
Uncaught (in promise)
```

**根本原因：**
`useRoute()` 在 Vue 3 的 Composition API 中必须在 `setup()` 函数的顶层调用，不能在 `computed()` 回调内部调用。这是因为 `useRoute()` 内部使用了 Vue 的依赖注入系统 (`inject()`)，而 `inject()` 只能在组件初始化阶段的同步代码中调用。

## 解决方案

将 `useRoute()` 调用移到 `<script setup>` 的顶层，然后在 `computed()` 中引用路由对象。

## 代码变更

### 文件：frontend/src/App.vue

```javascript
// 之前（错误写法）
const currentRoute = computed(() => {
  return useRoute().path  // ❌ useRoute() 在 computed 内部调用
})

const pageTitle = computed(() => {
  const route = useRoute()  // ❌ useRoute() 在 computed 内部调用
  const titleMap = {...}
  return titleMap[route.path] || '...'
})

// 之后（正确写法）
const route = useRoute()  // ✅ 在 setup 顶层调用

const currentRoute = computed(() => route.path)

const pageTitle = computed(() => {
  const titleMap = {...}
  return titleMap[route.path] || '...'
})
```

## 验证结果

- ✅ 页面正常渲染
- ✅ 路由导航正常工作
- ✅ 页面标题正确显示
- ✅ API 数据正常加载

## Why

Vue 3 的 Composition API 要求组合式函数（如 `useRoute()`、`useRouter()`、`useStore()`）必须在 `setup()` 的同步代码中调用，因为它们依赖于 Vue 的依赖注入系统。

## How to apply

当遇到 `inject() can only be used inside setup()` 错误时，检查是否有组合式函数在回调函数（如 `computed()`、`watch()`、`setTimeout()`）内部调用，将其移到 setup 顶层。

[[vue3]]
[[composition-api]]