Vue 3 中 useRouter 与 useRoute 的深度解析

在 Vue 3 中，vue-router 提供了两个非常重要的 Composition API 钩子：useRouter 和 useRoute。这两个钩子虽然都与路由相关，但它们的用途和返回的数据类型截然不同。本文将详细解析这两个钩子的区别及其用法，帮助你在 Vue 3 应用中更加灵活地处理路由逻辑。

useRouter：控制路由的行为

useRouter 是一个函数，它返回当前路由器的实例。这个实例提供了多种方法来控制路由的跳转，如 push、replace、go、back 等。这使得在 Vue 组件内部实现页面导航变得非常简单和直接。

主要用途

• 导航到不同的路由：通过调用 router.push、router.replace 等方法实现页面间的跳转。
• 控制路由的历史记录：使用 router.go、router.back、router.forward 方法在路由历史中前进或后退。

示例代码

import { useRouter } from 'vue-router';  
  
export default {  
  setup() {  
    const router = useRouter();  
  
    // 导航到首页  
    function goToHome() {  
      router.push('/home');  
    }  
  
    // 使用命名路由和参数导航  
    function goToUserProfile(userId) {  
      router.push({ name: 'userProfile', params: { id: userId } }); // 注意：这里使用 params 可能不适用于命名路由，通常使用 query 或 params（在路由配置中指定）  
    }  
  
    return { goToHome, goToUserProfile };  
  }  
}

路由器实例的常用方法

• router.push(location, onComplete?, onAbort?)：导航到新的 URL，向 history 栈添加新记录。
• router.replace(location, onComplete?, onAbort?)：导航到新的 URL，但替换掉当前的 history 记录。
• router.go(n)：在 history 记录中前进或后退 n 步。
• router.back()：后退一步，相当于 router.go(-1)。
• router.forward()：前进一步，相当于 router.go(1)。

useRoute：获取当前路由的信息

useRoute 是一个函数，它返回当前路由位置的对象，即当前激活的路由信息。这个对象包含了当前路由的各种详细信息，如路径、查询参数、hash 值等。

主要用途

• 获取当前路由的信息：如路径、查询参数、hash 等。
• 访问路由的参数：包括动态路由的参数和查询参数。

示例代码

import { useRoute } from 'vue-router';  
  
export default {  
  setup() {  
    const route = useRoute();  
  
    // 获取当前路由的路径  /user
    console.log(route.path);  
  
    // 假设有动态路由 /users/:id  
    const userId = route.params.id; // 注意：对于动态路由参数，通常使用 params.id 在组件内部获取，但具体取决于路由配置  
    console.log(userId);  
  
    // 获取查询参数  /search?q=vue  
    const queryParams = route.query;  
    console.log(queryParams.q); // 假设 URL 是 /search?q=vue  
  
    return { userId, queryParams };  
  }  
}

useRoute 返回的对象属性

• route.path：当前路由的路径（字符串）。
• route.params：一个包含动态片段和全匹配片段的键值对对象（注意：在某些情况下，可能需要在组件内部通过 $route.params 访问）。
• route.query：一个包含所有查询参数的键值对对象。
• route.hash：当前路由的 hash 值（带 # 符号）。
• route.fullPath：包含路径、查询参数和 hash 的完整 URL 路径。

总结

• useRouter：用于控制路由的行为，如导航到不同的页面，控制路由的历史记录等。
• useRoute：用于获取当前路由的信息，如路径、查询参数、hash 等，以便在组件内部根据这些信息执行相应的逻辑。

理解这两个钩子的区别和用法，可以帮助你更好地在 Vue 3 应用中处理路由相关的逻辑，提升开发效率和应用的灵活性。