vue 中 $route 和 $router 的区别

**Vue 中 $route 和 $router 的区别**

在 Vue.js 中，$route 和 $router 是两个非常重要的概念，它们分别代表了路由信息和路由实例。虽然它们看起来很相似，但实际上它们有着不同的作用和用途。在本文中，我们将详细介绍 $route 和 $router 的区别，并提供相关代码示例。

**$route**

$route 是一个 Vue.js 内置的对象，它代表了当前路由信息。它包含了路由参数、路径等信息，可以通过 `$route` 来访问。例如：

javascript// 在组件中使用 $routeexport default {
 data() {
 return {
 id: this.$route.params.id,
 name: this.$route.query.name }
 },
 methods: {
 goBack() {
 this.$router.go(-1)
 }
 }
}

在上面的示例中，我们使用 `$route` 来获取路由参数 `id` 和 `name`。我们还可以通过 `$route` 来访问当前路由的路径、参数等信息。

**$router**

$router 是一个 Vue.js 内置的对象，它代表了路由实例。它提供了各种方法来管理路由，例如：导航到新路由、返回上一页等。例如：

javascript// 在组件中使用 $routerexport default {
 methods: {
 goHome() {
 this.$router.push('/')
 },
 goBack() {
 this.$router.go(-1)
 }
 }
}

在上面的示例中，我们使用 `$router` 来导航到新路由 `/` 和返回上一页。

**区别**

虽然 $route 和 $router 都是 Vue.js 内置的对象，但它们有着不同的作用和用途：

* $route 是一个代表当前路由信息的对象，它包含了路由参数、路径等信息。
* $router 是一个代表路由实例的对象，它提供了各种方法来管理路由。

**总结**

在本文中，我们详细介绍了 Vue.js 中 $route 和 $router 的区别。$route代表当前路由信息，包含了路由参数、路径等信息，而 $router代表路由实例，提供了各种方法来管理路由。在实际开发中，需要正确使用 $route 和 $router 来实现路由的管理和跳转。

**相关代码示例**

以下是相关代码示例：

javascript// 在组件中使用 $routeexport default {
 data() {
 return {
 id: this.$route.params.id,
 name: this.$route.query.name }
 },
 methods: {
 goBack() {
 this.$router.go(-1)
 }
 }
}

// 在组件中使用 $routerexport default {
 methods: {
 goHome() {
 this.$router.push('/')
 },
 goBack() {
 this.$router.go(-1)
 }
 }
}

以上是相关代码示例，希望能帮助您理解 Vue.js 中 $route 和 $router 的区别。