Vue 中 $router 与 $route 有哪些区别

在Vue.js的开发中，$router和$route是两个重要的概念，虽然它们的名字相似，但在功能和用途上有着明显的区别。

$router是Vue Router的实例对象。它就像是一个导航员，负责管理整个应用程序的路由系统。通过$router，我们可以进行路由的导航操作，比如跳转到不同的页面。例如，我们可以使用$router.push方法来进行编程式导航，将用户导向到新的路由路径。比如，当用户点击一个按钮时，我们可以通过$router.push('/new-page')将用户导航到名为'new-page'的路由对应的页面。$router还提供了其他方法，如$router.replace用于替换当前路由，$router.go用于在历史记录中前进或后退。

而$route则是一个包含当前路由信息的对象。它更像是一个信使，传递着当前路由的各种详细信息。$route对象包含了诸如路径（path）、参数（params）、查询参数（query）等信息。例如，当我们定义了一个带有参数的路由，如'/user/:id'，在对应的组件中，我们可以通过$route.params.id来获取传递过来的用户ID参数。再比如，如果路由中有查询参数，如'/search?keyword=vue'，我们可以通过$route.query.keyword获取到查询关键词'vue'。

从作用范围来看，$router是全局的，它在整个应用程序中都是可用的，用于控制路由的跳转和导航。而$route是局部的，它主要在当前激活的路由组件中使用，用于获取当前路由的相关信息。

在实际开发中，我们需要根据具体的需求来正确使用$router和$route。如果我们需要进行页面的跳转或者对路由历史进行操作，就需要使用$router。如果我们想要获取当前路由的参数、路径等信息，那么就应该使用$route。

理解$router和$route的区别对于掌握Vue.js的路由系统至关重要，能够帮助我们更高效地开发出功能强大的Vue应用程序。