前端/移动开发面试题更新 2026-08-05

请说明Vue Router中$route和$router两个对象的区别,包括它们各自的职责、可访问的属性以及使用场景。

前端/移动开发技术原理VueVue Router

考察说明

考查对Vue Router核心概念的理解,区分路由信息对象与路由器实例的职责。

回答思路

  1. 【回答框架 1】$route是当前激活路由的状态快照,包含当前路由的路径、参数、查询、哈希、匹配记录等信息,是只读的,每次导航后都会更新,常用于获取当前路由信息。
  2. 【回答框架 2】$router是路由器实例,是全局唯一的,负责路由的跳转、导航守卫、历史记录管理等操作,提供了push、replace、go等方法,用于编程式导航。
  3. 【回答框架 3】区别在于:$route是当前路由的描述,$router是路由器的操作入口;$route会随导航变化,$router在整个应用中保持同一实例;实际开发中,读路由信息用$route,做路由跳转用$router。
  4. 【回答框架 4】使用场景示例:在组件中通过this.$route.params获取动态路由参数,通过this.$router.push进行页面跳转。
  5. 【回答框架 5】在组合式API中,可以使用useRoute和useRouter分别获取对应的响应式对象,与选项式API中的$route和$router等价。
  6. 【关键点 1】$route是当前路由的状态,包含路径、参数、查询等,只读且随导航更新。
  7. 【关键点 2】$router是全局路由器实例,提供跳转方法和导航守卫管理。
  8. 【关键点 3】$route用于读取路由信息,$router用于执行路由操作。
  9. 【关键点 4】两者在组合式API中对应useRoute和useRouter。
  10. 【易错点 1】混淆两者作用,试图用$router获取当前路由信息会导致错误。
  11. 【易错点 2】在组件中直接修改$route对象,应通过导航方法更新路由。
  12. 【易错点 3】忽略$route的响应式特性,在非组件上下文中获取路由信息可能无法实时更新。