青岛网站优化公司编程培训

在 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

总结

• $router 用于进行路由跳转和控制，提供了改变当前路由的能力。
• $route 用于获取当前路由的信息，是一个只读对象，包含了当前路由的路径、查询参数、动态参数等。

这两个对象通常一起使用，$router 用来改变路由，$route 用来访问当前路由的状态。