【Vue-Router】$route 和 $router 对象有什么区别？

Vue Router 提供了两个核心对象，分别是 $route 和 $router，它们用于处理路由和导航，但在功能和用途上有一些不同：

1. $route 对象：

   • $route 是一个包含当前路由信息的只读对象，可以通过 this.$route 访问。
   • 它包含了当前路由的各种属性，如路径、参数、查询参数、哈希、路由元信息等，如 $route.params 获取路由参数，$route.query 获取查询参数等。
   • $route 对象是响应式的，当路由发生变化时，它会自动更新，因此可以在组件中监听它的变化来执行特定的操作。
   • $route 对象的作⽤范围是单次路由匹配，即当路由匹配成功后，$route 对象会被创建，并在路由匹配结束后被销毁。

2. $router 对象：

   • $router 是 Vue Router 的路由实例对象，它负责管理整个路由的状态，可以通过 this.$router 访问。
   • 它包含了路由的跳转方法、路由导航守卫等路由相关的方法和属性。如 push、replace、go，用于在不同路由之间进行导航。
   • $router 对象也可以用于访问路由的配置信息，如当前路径、路由参数、路由切换、路由模式（Hash 模式或 History 模式）等。
   • $router 对象是全局的，可以在任何地方访问它，而不需要将其传递给组件。
   • 当路由创建时，$router 对象会被创建，并在路由创建和销毁的整个生命周期存在。

示例用法：

// 在组件中使用 $route 对象
export default {
  mounted() {
    // 访问当前路径
    console.log(this.$route.path);
    
    // 访问查询参数
    console.log(this.$route.query.paramName);
  }
}

// 在组件中使用 $router 对象
export default {
  methods: {
    navigateToAnotherRoute() {
      // 使用 $router 对象进行路由跳转
      this.$router.push('/another-route');
    }
  }
}

总结：

• $route 用于访问当前路由的信息，是只读的，响应式的。
• $router 用于导航和管理路由，包含路由跳转方法和配置信息，是全局的。
• 两者通常一起使用，通过 $router 进行路由跳转，然后在目标组件中使用 $route 访问路由信息。