Vue3中Vue Router的使用区别

在 Vue 3 中，useRouter 和 useRoute 是两个用于 Vue Router 的 Composition API 函数，它们的用途和返回的对象不同，接下来详细了解一下它们的区别以及如何正确使用它们。

useRouter

• useRouter 用于获取 router 实例，这个实例提供了编程式导航的方法，例如 push、replace、go 等。
• 使用 useRouter 时，你可以对路由进行各种操作，比如跳转到一个新的页面。

useRoute

• useRoute 用于获取当前激活的路由的信息，返回一个响应式的 route 对象。
• 使用 useRoute 可以获取到当前路由的路径、查询参数、哈希值等信息，但是不能直接使用它来改变路由。

错误原因

如果你试图使用 useRoute（返回当前路由信息的对象）来调用 useRouter（提供路由操作方法的实例）的方法（如 push、replace），就会遇到错误，因为 useRoute 返回的对象不包含这些操作路由的方法。

示例

正确的使用方法如下：

• 使用 useRouter 进行路由操作：

  import { useRouter } from "vue-router";
  
  const router = useRouter();
  router.push('/home'); // 使用router实例进行页面跳转
  

• 使用 useRoute 获取当前路由信息：

  import { useRoute } from "vue-router";
  
  const route = useRoute();
  console.log(route.path); // 使用route对象获取当前路由路径
  

总结来说，你遇到的错误可能是因为混淆了 useRouter 和 useRoute 的用途和返回的对象类型。确保你根据需要选择正确的一个，如果是要操作路由（如跳转页面），应使用 useRouter。