vue-router 中 useRoute 和 useRouter 的区别

在 Vue Router 中，useRoute 和 useRouter 是两个核心 Composition API，它们的区别主要体现在功能定位、返回值和使用场景上：

功能定位

特性	useRoute	useRouter
用途	获取当前路由的状态信息，例如路径、参数、查询参数等。	获取路由实例，用于执行导航操作（如跳转、替换路由）或访问全局路由配置。
返回值	一个响应式的路由对象，包含当前路由的所有静态信息（如 path、params、query 等）。	一个非响应式的路由实例，提供 push、replace、go 等方法。
典型场景	根据路由信息动态渲染内容（如根据 route.params.id 加载数据）。	在组件中触发路由跳转（如按钮点击跳转页面）。

核心区别对比

特性	useRoute	useRouter
返回值类型	响应式路由对象（包含当前路由信息）	非响应式路由实例（提供操作方法）
主要功能	读取路由信息（如路径、参数）	执行导航操作（如跳转、替换路由）
响应式支持	返回对象是响应式的	实例本身非响应式，但可通过 router.currentRoute 获取响应式路由状态
典型用法	const route = useRoute(); console.log(route.path)	const router = useRouter(); router.push('/home')

使用场景示例

useRoute 场景

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id);  // 获取动态路由参数
console.log(route.query.page);  // 获取查询参数
</script>

总结

• 选择原则：

  • 需要读取路由信息（如路径、参数）时使用 useRoute。
  • 需要操作路由（如跳转、替换）时使用 useRouter。

• 注意事项：

  • useRoute 返回的对象是响应式的，适合结合 watch 监听路由变化。
  • useRouter 的实例方法（如 push）会触发导航守卫，需注意副作用。