【面试题系列Vue03】Vue Router 的 $route 和 $router 对象有什么区别？

在Vue.js中，$route 和 $router都是Vue Router 提供的对象，但它们之间主要的区别在于其 作用范围 和生命周期。

作用范围

1、$router（下面简称router）：

• router是一个全局路由实例，可以理解为路由的控制中心或者说是路由的管理器。它提供了一系列的方法来控制导航，负责管理整个路由的状态（包括当前路径、路由参数、路由切换等）。例如push、replace、go等，通过编程的方式来进行路由的跳转、修改 URL等操作。
• router对象在整个Vue应用中是唯一的，因此它的作用范围是全局的。也就是说，可以在任何组件内通过this.$router访问到同一个路由实例。

2、$route（下面简称route）：

• route是一个反映当前路由状态的对象，它包含了当前 URL 解析得到的信息，如路径（path）、查询参数（query）、哈希（hash）、参数（params）等。但是，route 对象是⼀个只读对象，我们无法通过改变 route 对象来改变当前路由。
• route对象是响应式的，它会随着路由的变化而变化。每个组件实例都可以通过this.$route访问到它自己的当前路由状态对象，但这个对象是随着路由的变化而局部更新的。这意味着每个组件看到的route可能是不同的，具体取决于它们如何与当前路由相关联。

生命周期

1、$router（下面简称router）：

• router的生命周期与Vue应用的生命周期紧密相关，它代表了整个路由系统。从应用创建开始它就存在，直到应用销毁结束。因此，它的生命周期通常很长，与整个Vue实例的生命周期一致。

2、$route（下面简称route）：

• route对象的生命周期是动态的。它是单次路由匹配，即当路由匹配成功后，route 对象会被创建，并在路由匹配结束后被销毁。每当路由发生变化时，与新路由相关的组件将会接收到一个新的route对象。这意味着route的生命周期通常比较短，依赖于路由的活动周期。

一个总结

• $router 对象是用于控制当前路由状态的方式。
• $route 对象是获取当前路由信息的方式。

理解这些差异有助于在Vue应用中更加精确地控制路由行为，以及更好地管理组件的渲染和数据更新~