$router和$route

一、本质定位

• $router：Vue Router 实例，是全局路由管理器，负责路由导航、配置和控制。
  （类比：城市的交通系统，管理所有路线和导航规则）
• $route：当前激活的路由信息对象，包含路径、参数、查询等当前路由状态。
  （类比：当前行驶的具体路线信息，如起点、终点、途经站点）

二、核心功能对比

特性	$router	$route
类型	VueRouter 实例	路由信息对象
获取方式	this.$router 或 import router from '...'	this.$route 或组件内 route 参数
核心用途	路由导航（如跳转、后退）、路由配置	获取当前路由信息（如路径、参数、查询）
常用 API	push, replace, go, beforeEach	path, params, query, meta

三、典型应用场景

1. $router 的使用场景

• 编程式导航：

  javascript

  // 跳转路径
  this.$router.push('/home');
  // 带参数跳转
  this.$router.push({ name: 'user', params: { id: 1 } });
  // 替换当前历史记录
  this.$router.replace('/login');
  

• 全局路由守卫：

  javascript

  router.beforeEach((to, from, next) => {
    // 路由跳转前的权限校验
  });
  

2. $route 的使用场景

• 获取当前路径参数：

  javascript

  // 路径: /user/123
  console.log(this.$route.params.id); // 输出: 123
  

• 获取查询参数：

  javascript

  // 路径: /search?q=vue
  console.log(this.$route.query.q); // 输出: "vue"
  

• 访问路由元信息：

  javascript

  // 路由配置: { path: '/admin', meta: { requiresAuth: true } }
  console.log(this.$route.meta.requiresAuth); // 输出: true
  

四、面试高频问题

1. 如何在组件外使用 $router？

   • 通过导入路由实例：

     javascript

     import router from '@/router';
     router.push('/login');
     

2. $route.params 和 $route.query 的区别？

   • params：路径参数（如 /user/:id 中的 id），在路径中直接定义，且必须存在。
   • query：查询参数（如 ?name=john），可选且不影响路由匹配。

3. 如何监听路由变化？

   • 使用 watch 监听 $route 对象：

     javascript

     watch: {
       $route(to, from) {
         // 路由变化时执行
       }
     }
     

4. $router.go(-1) 和 window.history.back() 的区别？

   • $router.go(-1)：Vue Router 封装的方法，支持跨平台（如 SSR）。
   • window.history.back()：原生浏览器 API，可能触发完整页面刷新。

五、注意事项

• 响应式差异：

  • $route 是响应式的，路由变化时自动更新；
  • $router 是全局单例，不随路由变化而变化。

• 性能提示：

  • 频繁监听 $route 变化可能影响性能，建议使用 beforeRouteUpdate 组件内守卫替代。

• Vue 3 中的变化：

  • 在组合式 API 中，需通过 useRouter 和 useRoute 函数获取：

    javascript

    import { useRouter, useRoute } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    

总结

• $router：路由系统的 “控制器”，用于导航和配置。
• $route：当前路由的 “状态机”，用于获取路由信息。
  区分两者的核心用途是掌握 Vue Router 的关键，合理使用可避免路由管理中的常见误区。