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