useRoute和useRouter
在 Vue 3 中，useRoute 和 useRouter 是两个常用的组合式 API，用于处理路由相关的功能。
useRoute
useRoute 用于获取当前的路由信息。它返回一个响应式的 route 对象，包含了当前路由的所有信息，例如路径、参数、查询参数等。
用途
- 获取当前路由的路径、参数、查询参数等。
- 监听路由的变化。
示例
<template><div><p>Current Path: {{ route.path }}</p><p>Project ID: {{ route.params.projectId }}</p><p>Query Param: {{ route.query.someQueryParam }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';const route = useRoute();
</script>
useRoute 返回当前的路由对象，可以通过 route.path、route.params 和 route.query 获取相应的信息。
useRouter
useRouter 用于获取路由实例。它返回一个 router 对象，提供了导航和路由操作的方法，例如跳转到另一个路由、替换当前路由、前进和后退等。
用途
- 编程式导航（跳转到另一个路由）。
- 操作路由栈（前进、后退、替换等）。
示例
<template><button @click="goToReport">Go to Report</button>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToReport = () => {router.push({ name: 'CreateCalcPage', params: { projectId: '123', reportId: '456' } });
};
</script>
useRouter 返回路由实例，可以通过 router.push 方法编程式地导航到另一个路由。
总结
-
useRoute：- 返回当前路由对象。
- 用于获取当前路由的路径、参数、查询参数等信息。
- 响应式，可以监听路由的变化。
-
useRouter：- 返回路由实例。
- 用于编程式导航和操作路由栈。
- 提供方法如
push、replace、go、back等。
具体区别
| 特性 | useRoute | useRouter |
|---|---|---|
| 返回值 | 当前路由对象 | 路由实例 |
| 主要用途 | 获取当前路由信息 | 编程式导航和操作路由栈 |
| 响应式 | 是 | 否 |
| 常用方法 | route.path, route.params, route.query | router.push, router.replace, router.go, router.back |