跳出迷雾：剖析 $route 与 $router 在 Vue 路由中的奥秘

2023-09-07 02:26:27

在 Vue.js 的世界里，路由扮演着至关重要的角色，它负责应用程序不同页面之间的无缝导航。在路由管理中，route 和 router 是两个密切相关的对象，经常被开发者用于各种与路由相关的任务。理解这两者的区别对于驾驭 Vue 路由至关重要，因为它可以让你充分利用其功能，构建灵活且响应迅速的 Web 应用程序。

剖析 $route

$route 对象提供有关当前激活路由的信息。它是一个只读对象，包含以下重要属性：

path： 当前路由的路径，包括查询字符串。
query： 一个包含查询字符串参数的对象。
params： 一个包含动态路由段参数的对象。
fullPath： 当前路由的完整路径，包括查询字符串和哈希值。
meta： 一个包含与路由关联的元数据的对象，通常用于路由守卫和导航钩子。

你可以通过在组件中使用 this.$route 访问 $route 对象。它使你能够动态响应路由变化，根据当前路由显示不同的内容或触发特定的行为。

揭开 $router 的神秘面纱

$router 对象是 Vue Router 实例，它提供了更高级别的路由操作和配置。它公开了一系列方法和属性，让你可以控制应用程序的导航和路由行为。其中一些关键功能包括：

push： 向历史记录堆栈中添加新路由。
replace： 替换当前路由，不会向历史记录堆栈添加新条目。
go： 在历史记录堆栈中向前或向后导航。
beforeEach： 一个全局导航守卫，用于在导航到新路由之前执行代码。
afterEach： 另一个全局导航守卫，用于在导航到新路由之后执行代码。

你可以通过 this.$router 访问 $router 对象。它让你能够灵活地控制应用程序的导航流程，实现复杂的路由逻辑和状态管理。

比较异同

虽然 route 和 router 都是 Vue 路由中的重要对象，但它们具有不同的目的和职责。

特征	$route	$router
类型	只读对象	Vue Router 实例
用途	提供当前路由信息	控制路由导航和配置
属性	路由路径、参数、查询	导航方法、守卫
访问	`this.$route`	`this.$router`

实际应用

理解 route 和 router 之间的区别对于以下常见任务至关重要：

在组件中显示动态内容： 使用 route.params 和 route.query 访问路由参数和查询字符串参数，以根据当前路由动态渲染内容。
导航到其他路由： 使用 router.push 或 router.replace 在应用程序中导航到不同的路由。
设置全局导航守卫： 使用 router.beforeEach 和 router.afterEach 设置钩子，以在导航到新路由之前或之后执行自定义逻辑。
配置路由： 使用 $router.options 配置路由选项，例如模式、基准路径和滚动行为。