面试题：Vue Router 中 route 和 router 有哪些区别？

在 Vue Router 中，router 和 route 是两个核心但极易混淆的概念。它们的区别如下：

1. 核心定义

• router (路由器实例)：
  • 你可以把它理解为整个导航系统的“控制器”或“管理者”。
  • 它是一个通过 new VueRouter({...}) 创建的单一实例。
  • 它负责管理应用中的所有路由配置、进行导航（跳转）、监听路由变化等全局性操作。
• route (当前路由信息)：
  • 它代表的是当前正在被激活的那一条具体的路由的快照 (snapshot)。
  • 它是一个对象，包含了当前 URL 对应的路径、参数 (params)、查询参数 (query)、匹配的路由记录等只读信息。
  • 每次 URL 变化时，都会生成一个新的 route 对象。

2. 主要用途

功能	使用 router	使用 route
获取当前路径	❌ 不直接提供	✅ this.$route.path
获取路由参数	❌ 不直接提供	✅ this.$route.params.id, this.$route.query.name
编程式导航 (跳转)	✅ this.$router.push('/home'), this.$router.go(-1)	❌ 不能用于跳转
访问路由配置	✅ 可以访问全局配置和路由表	❌ 只包含当前路由的信息
监听路由变化	✅ router.beforeEach(...) 等全局守卫	✅ watch: { $route(...) } 监听当前路由变化

3. 在组件中的访问方式

• router：通过组件实例的 $router 属性访问。
  • 例如：this.$router.push({ name: 'User', params: { id: 123 }})
• route：通过组件实例的 $route 属性访问。
  • 例如：console.log(this.$route.params.id) 获取当前路由的 ID 参数。

4. 类比理解（重要）

一个经典的类比是：

router 就像是一本完整的地图册 (Map Book)，而 route 是你当前所在位置的那一页 (Page)。

• 地图册 (router) 包含了所有可能的路线和地点（所有路由配置）。
• 当前页 (route) 显示了你此刻的具体坐标、周边环境和详细信息（当前 URL 的路径、参数等）。

总结

特性	router	route
本质	路由器实例 (管理者)	当前路由信息对象 (快照)
数量	应用中通常只有一个	每次 URL 变化都会产生新的
主要作用	控制导航 (跳转、前进、后退)	获取当前路由的信息 (路径、参数)
访问方式	this.$router	this.$route
是否可变	是，可以调用方法改变状态	只读，表示当前状态

简单记住：router 用来“动”（跳转），route 用来“看”（获取信息）。