$route和$router的区别

在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，但它们有不同的用途和功能。

1. `$router`

$router 是 Vue Router 实例的引用，它允许你通过 JavaScript 进行路由的控制和导航。你可以通过 $router 来执行路由的操作，如跳转、后退、前进等。它通常用于编程式导航。

常见用法：

跳转到指定路由：
$router.push() 或 $router.replace()
前进或后退：
$router.go()
重置路由历史：
$router.replace()

示例：

// 跳转到某个路径
this.$router.push('/home');// 跳转到指定的路由对象
this.$router.push({ name: 'user', params: { userId: 123 } });

2. `$route`

$route 是当前路由的状态对象，它包含了关于当前路由的信息，如路径、查询参数、路由参数、hash 值等。$route 是一个只读对象，用于获取当前路由的信息。

常见属性：

$route.path: 当前路由的路径
$route.query: 查询参数（URL 中 ? 后的部分）
$route.params: 路由参数（动态路由的部分）
$route.hash: URL 中的 hash 部分（# 后的部分）
$route.name: 当前路由的名称（如果有的话）

示例：

// 获取当前路由的路径
console.log(this.$route.path); // 输出当前路由的路径// 获取查询参数
console.log(this.$route.query.id); // 输出当前查询参数中的 id// 获取路由参数
console.log(this.$route.params.userId); // 输出路由参数中的 userId