useRouter用于编程式导航，返回可操作的router实例；useRoute用于响应式读取当前路由信息，返回自动更新的route对象。两者分工明确，不可混淆，需在setup中调用且常配合使用。
在 Vue 3 组合式 API 中，获取路由能力主要靠两个核心钩子：useRouter 获取可操作的路由器实例，useRoute 获取当前响应式的路由信息对象。两者分工明确，不可混淆。
useRouter：用于导航和路由控制
它返回的是整个 router 实例，提供 push、replace、go、back、forward 等编程式导航方法，也支持添加导航守卫等高级操作。
- 必须在
setup()或setup内的组合函数中调用，不能在普通函数或生命周期外使用 - 不响应式，仅提供操作接口；它本身不会随路由变化而更新
- 常见用法包括跳转命名路由、带参数跳转、替换历史记录等
示例：
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const goToUser = (id) => {
router.push({ name: 'User', params: { id } })
}
const goBack = () => {
router.back()
}
return { goToUser, goBack }
}
}
useRoute：用于读取当前路由状态
它返回一个响应式的 route 对象，包含 path、name、params、query、hash、meta、fullPath 等字段，且会在路由切换时自动更新。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 适合在模板中直接绑定，如
{{ route.params.id }} - 可在
watch中监听其变化（例如监听route.params或route.query） - 注意：不要解构响应式对象（如
const { params } = useRoute()），会丢失响应性
示例：
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
// 正确：保持响应式引用
const userId = computed(() => route.params.id)
// 正确：在 watch 中监听 query 变化
watch(() => route.query.tab, (newTab) => {
console.log('tab changed to:', newTab)
})
return { route, userId }
}
}
常见误区与注意事项
这两个钩子看似相似，但用途截然不同，容易误用：
-
useRouter是“发号施令”的，用来改变路由；useRoute是“观察汇报”的，用来读取当前状态 - 不能在
setup外调用，也不能在非组件作用域（如普通工具函数）中直接使用——需通过参数传入或依赖注入 - 若需在
onMounted或其他生命周期中访问路由，仍应先在setup中调用并保留引用，而非临时调用 - 服务端渲染（SSR）环境下，
useRoute返回的对象在首屏时即包含正确值，无需额外判断
配合使用场景
多数实际业务中，两者常一起出现：一边读取当前参数，一边根据逻辑跳转。
- 例如：商品详情页根据
route.params.id请求数据，加载失败时用router.push('/404')跳转 - 又如：搜索页监听
route.query.q，同时提供清空搜索的按钮，点击后router.replace({ path: '/search', query: {} })
