Vue3中Vue Router的使用区别

╰+哭是因爲堅強的太久メ 2024-04-29 01:03 71阅读 0赞

在 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`。  
![在这里插入图片描述][c1ca3e62711e4dcd9f5ab0e46c45a74c.gif_pic_center]

[c1ca3e62711e4dcd9f5ab0e46c45a74c.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/c9036b608e9e410d9986273e1b8d33e5.gif