$route和$router区别

一、本质差异：数据与工具的区分

1. $route：路由当前状态的只读对象

• 类型：路由信息对象，包含当前路由的路径、参数、查询等实时数据。
• 特点：当路由变化时，$route 的值会自动更新，但其本身是响应式的只读数据，不能直接修改。

2. $router：路由操作的全局实例

• 类型：路由实例，包含一系列用于导航（如跳转、替换路由）和控制路由行为的方法。
• 特点：是操作路由的“工具”，通过调用其方法可主动改变路由状态。

二、核心属性与方法对比

维度	$route（路由状态）	$router（路由操作）
核心属性	- path：当前路由路径（如 /user/1） - params：路由参数（如 { id: 1 }） - query：查询参数（如 { name: '张三' }） - fullPath：完整路径（如 /user/1?name=张三）	- push：跳转至新路由 - replace：替换当前路由 - go：前进/后退历史记录 - currentRoute：获取当前 $route
响应式	是（路由变化时自动更新）	否（本身是实例，方法用于修改状态）
修改方式	不可直接修改，仅由路由变化触发更新	通过调用方法（如 $router.push）主动修改路由

三、实战应用场景示例

1. $route 的典型用法

• 获取当前路由参数：

  <template>
    <div>用户ID：{{ $route.params.id }}</div>
    <div>查询参数：{{ $route.query.name }}</div>
  </template>
  

• 监听路由变化：

  <script>
  export default {
    watch: {
      $route(to, from) {
        // 路由切换时触发（如从 /user/1 到 /user/2）
        console.log('路由变更：', to.path, from.path);
      }
    }
  }
  </script>
  

2. $router 的典型用法

• 编程式导航：

  <template>
    <button @click="$router.push('/home')">跳转首页</button>
    <button @click="$router.replace('/login')">替换为登录页</button>
    <button @click="$router.go(-1)">返回上一页</button>
  </template>
  

• 控制路由行为：

  // 在路由守卫中使用 $router 进行导航控制
  router.beforeEach((to, from, next) => {
    if (需要登录) {
      $router.push('/login'); // 未登录则跳转登录页
    } else {
      next();
    }
  });
  

四、问题

1. 问：如何在组件中获取当前路由的参数？

• 答：通过 $route.params 获取动态参数（如 /user/:id 中的 id），或通过 $route.query 获取查询参数（如 ?name=张三）。

2. 问：$route 和$router 在路由守卫中的作用？

• 答：
  • $route 用于获取目标路由（to）和来源路由（from）的信息；
  • $router 用于在守卫中执行导航操作（如 $router.push 阻止默认跳转）。

3. 问：为什么 $route 是响应式的，而$router 不是？

• 答：
  • $route 是路由状态的“快照”，需要随路由变化实时更新，因此设计为响应式；
  • $router 是操作工具，其方法用于主动修改状态，本身无需响应式。

五、记忆技巧与最佳实践

• 类比记忆：

  • $route 像“地图”，显示你当前在哪里（路径、参数等）；
  • $router 像“方向盘”，让你能开到其他地方（跳转、后退等）。

• 最佳实践：

  • 避免直接修改 $route，如需导航请使用 $router 的方法；
  • 在组件中解构 $route 时需注意保持响应式（如使用 const { params } = useRoute() in Vue 3）。

总结

$route 和 $router 是 Vue Router 中互补的核心概念：前者提供当前路由的状态信息，后者负责路由的导航控制。理解两者的本质差异（数据 vs 工具）是掌握 Vue 路由编程的基础，尤其在处理参数获取、导航跳转和路由守卫时，正确区分两者的应用场景至关重要。