在 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
方法在路由历史中前进或后退。
示例代码
javascript">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 等。
- 访问路由的参数:包括动态路由的参数和查询参数。
示例代码
javascript">import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); // 获取当前路由的路径 /userconsole.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 应用中处理路由相关的逻辑,提升开发效率和应用的灵活性。