Vue 3 路由秘籍：useRouter vs useRoute，初学者必知的区别与实战技巧

Vue Router 中的 useRouter 和 useRoute：初学者入门指南

在 Vue 3 的组合式 API 中，useRouter 和 useRoute 是两个核心函数，但它们的用途截然不同。初学者常常会混淆这两个概念，本文将通过简单对比和示例，帮助你快速理解它们的区别和使用场景。

---

1. 核心区别：一个用于操作路由，一个用于获取路由信息

useRoute()：获取当前路由信息

• 功能：返回一个响应式对象，包含当前路由的详细信息（如路径、参数、查询参数等）。
• 用途：用于读取当前路由的静态或动态参数。
• 返回值：RouteLocationNormalized 对象（包含 path, params, query, name 等属性）。

useRouter()：操作路由

• 功能：返回一个路由实例，提供方法执行跳转、替换路径、导航守卫等操作。
• 用途：用于修改路由状态（如跳转页面、替换路径、返回上一页等）。
• 返回值：Router 实例（包含 push(), replace(), go() 等方法）。

---

2. 具体对比与示例

场景 1：获取当前路由信息（useRoute）

假设你有一个动态路由 /user/:id，需要显示用户 ID：

<template>
  <div>
    <h1>用户 ID: {{ route.params.id }}</h1>
    <p>当前路径：{{ route.path }}</p>
    <p>查询参数：{{ route.query.sort }}</p>
  </div>
</template>

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

const route = useRoute() // 获取当前路由对象
</script>

关键点：

• route.params：获取动态路由参数（如 :id）。
• route.query：获取查询参数（如 ?sort=desc）。
• route.path：获取完整路径（如 /user/123）。

---

场景 2：执行路由跳转（useRouter）

需要点击按钮跳转到 /user/456：

<template>
  <button @click="goToUser">跳转到用户页面</button>
</template>

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

const router = useRouter() // 获取路由实例

const goToUser = () => {
  router.push({
    path: '/user/456',
    query: { sort: 'asc' }
  })
}
</script>

关键点：

• router.push()：导航到新路径，支持 path、name、params、query 等参数。
• router.replace()：替换当前路径，不会保留历史记录。
• router.back()：返回上一页。

---

3. 常见误区与注意事项

误区 1：混淆 params 和 query

• params：用于动态路由参数（如 /user/:id 中的 id），通过 route.params.id 获取。
• query：用于查询参数（如 ?sort=desc），通过 route.query.sort 获取。

误区 2：push() 参数的正确用法

• 错误用法：混合使用 path 和 params：

  router.push({
    path: '/user/123',
    params: { id: 456 } // ❌ 无效！params 仅与 name 配合使用
  })
  

• 正确用法：

  // 使用 path + query
  router.push('/user/123?sort=desc')
  
  // 使用 name + params（推荐）
  router.push({
    name: 'User',
    params: { id: '123' },
    query: { sort: 'desc' }
  })
  

误区 3：路由实例的响应性

• useRoute() 返回的对象是响应式的，当路由变化时，属性会自动更新。
• useRouter() 返回的实例本身不是响应式的，但可以通过 router.currentRoute.value 获取当前路由的响应式状态。

---

4. 对比表格总结

功能	useRoute()	useRouter()
用途	获取当前路由信息	执行路由操作（跳转、替换等）
返回值类型	RouteLocationNormalized 对象	Router 实例
常用属性/方法	params, query, path, name	push(), replace(), go(), back()
响应式	是（自动更新）	否（需通过 currentRoute 获取响应式）

---

5. 总结

• useRoute()：读取当前路由的静态或动态参数，例如显示用户 ID 或查询条件。
• useRouter()：执行路由操作，例如跳转页面、替换路径或返回上一页。

通过这两个函数的配合使用，你可以轻松实现 Vue Router 的核心功能。记住：“Route 是看的，Router 是动的”，这样就能快速区分它们的用途了！

如果还有疑问，可以尝试在代码中打印 useRoute() 和 useRouter() 的返回值，观察它们的结构和行为，实践是掌握的最佳方式！