useRoute和useRouter的区别

在 Vue 3 中，useRoute() 和 useRouter() 都来自 Vue Router，它们是组合式 API 的一部分，但用途完全不同。下面是最直观的对比和解释：

API	用途	类比
useRoute()	获取当前路由的信息	相当于 this.$route
useRouter()	控制路由导航行为（跳转、前进等）	相当于 this.$router

功能点	useRoute()	useRouter()
获取当前路径	✅	❌
获取路由参数（params / query）	✅	❌
获取当前路由名、meta 信息等	✅	❌
编程式导航（router.push()）	❌	✅
返回上一页（router.back()）	❌	✅
替换导航（router.replace()）	❌	✅

示例:

useRoute() 用于“读”路由信息：

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id) // 读取动态路径参数
console.log(route.query.q)   // 读取查询参数
</script>

useRouter() 用于“操作”路由跳转：

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/') // 编程式导航到首页
}
</script>