vue $router和$route的区别详解

下面是详细讲解“vue $router和$route的区别详解”的完整攻略：

背景

Vue.js 是一个轻量级的 MVVM 前端框架，常用的路由管理器是 vue-router。在使用 vue-router 过程中，可能会涉及到两个关键对象：$router 和 $route。这两个对象貌似很相似，但实际上有着明确的区别。本文将详细讲解两者的区别和应用场景。

$router

在 Vue.js 组件中，可以通过这个对象访问到 VueRouter 实例（路由管理器），从而可以方便地执行一些基于路由跳转的方法，如push, replace, go等，使用 $router 对象的优点：

• $router 可以很方便地执行路由跳转的方法。
• $router 对象仅用于在组件代码中调用路由方法，因此较为轻量。

示例：跳转到命名路径为/home的页面

// 通过 this.$router 访问路由（VueRouter实例）
this.$router.push({ name: 'home' });

$route

$route 是当前路由的信息对象，包含当前路由的路径、参数、查询参数等，使用 $route 对象的优点：

• $route 是只读的，不支持修改。
• $route 可以在 computed 中进行响应式更新，方便的获得当前路由变化后的信息。

示例：获取当前路径参数

// 通过 this.$route 访问当前路由信息
console.log(this.$route.params.id);

总结

$router 是 vue-router 的实例对象，提供了一些基于路由跳转的方法，如push, replace, go等。常用于在组件代码中执行路由跳转的方法。

$route 是当前路由的信息对象，包含当前路由的路径、参数、查询参数等。$route 是只读的，不支持修改，可以在 computed 中进行响应式更新，方便的获得当前路由变化后的信息。

除了上述区别，$router 和 $route 还有很多的实际应用场景，比如：

• 在全局导航守卫中使用 $router 拦截路由跳转。
• 在页面的 computed 中使用 $route 监听路由变化。
• 在组件内部使用 $router 跳转路由，同时又使用 $route 获得当前路由信息。

这里只是简单举了几个例子，还有很多其它的应用场景，需要在实际业务场景中灵活运用。