vue3中 useRoute 和 useRouter 有什么区别

在 Vue 3 的组合式 API 中，useRoute 和 useRouter 是 Vue Router 提供的两个重要函数，它们在功能和用途上有一些区别。以下是它们的详细对比：

---

1. useRoute

useRoute 是一个组合式 API，用于获取当前路由的状态信息。它返回一个响应式的路由对象，包含当前路由的所有信息，例如路径、参数、查询等。

功能特点

• 获取路由信息：useRoute 返回一个响应式对象，包含以下属性：
  • path：当前路径（例如 /workbench）。
  • fullPath：包含查询参数和哈希的完整路径（例如 /workbench?query=123#hash）。
  • params：路由参数（例如 { id: 123 }）。
  • query：查询参数（例如 { query: '123' }）。
  • hash：哈希值（例如 #hash）。
  • matched：匹配的路由记录数组。
  • name：当前路由的名称（如果定义了）。
• 响应式：useRoute 返回的对象是响应式的，当路由发生变化时，这些属性会自动更新。

使用场景

• 当你需要在组件中访问当前路由的详细信息时，使用 useRoute。
• 例如，获取当前路径、路由参数或查询参数。

示例

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.path); // 当前路径
    console.log(route.params); // 路由参数
    console.log(route.query); // 查询参数
  }
};

---

2. useRouter

useRouter 是一个组合式 API，用于获取 Vue Router 的实例。它返回一个路由实例，通过它可以进行路由操作，例如跳转、替换、监听等。

功能特点

• 操作路由：useRouter 返回的路由实例提供了以下方法：
  • push(path)：导航到新路径。
  • replace(path)：替换当前路径，不会添加到历史记录。
  • go(n)：在历史记录中前进或后退。
  • back()：后退。
  • forward()：前进。
  • onReady(callback)：监听路由实例初始化完成。
  • beforeEach(guard)：全局前置守卫。
  • afterEach(hook)：全局后置钩子。
• 响应式：useRouter 返回的路由实例本身不是响应式的，但可以通过 router.currentRoute 获取当前路由的响应式状态。

使用场景

• 当你需要在组件中操作路由（例如跳转到其他页面）时，使用 useRouter。
• 例如，实现页面跳转、监听路由变化等。

示例

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goToHome = () => {
      router.push('/'); // 跳转到首页
    };
    const replaceToWorkbench = () => {
      router.replace('/workbench'); // 替换到工作台
    };

    return { goToHome, replaceToWorkbench };
  }
};

---

3. 区别总结

特性	useRoute	useRouter
用途	获取当前路由的状态信息	获取 Vue Router 的实例，用于操作路由
返回值	响应式的路由状态对象	Vue Router 实例
功能	获取路径、参数、查询等	跳转、替换、监听等操作
响应式	返回的对象是响应式的	返回的实例本身不是响应式的，但可以通过 router.currentRoute 获取响应式状态
使用场景	需要访问当前路由信息（如路径、参数）的场景	需要操作路由（如跳转、替换）的场景

---

4. 如何选择

• 如果你需要访问当前路由的详细信息（如路径、参数、查询等），使用 useRoute。
• 如果你需要操作路由（如跳转、替换、监听路由变化等），使用 useRouter。
• 在实际开发中，useRoute 和 useRouter 可以同时使用，互不冲突。

示例：同时使用

import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute(); // 获取当前路由信息
    const router = useRouter(); // 获取路由实例

    const goToHome = () => {
      router.push('/'); // 跳转到首页
    };

    console.log(route.path); // 当前路径
    console.log(route.query); // 查询参数

    return { goToHome };
  }
};