vue进阶-vue-route中 this.$router 与 this.$route 的区别

**Vue 进阶 - Vue-Router 中 `this.$router` 与 `this.$route` 的区别**

在 Vue.js 应用中，路由是实现前端单页面应用的关键组成部分。Vue Router 是一个流行的路由库，提供了许多高级功能来帮助我们管理应用中的路由。然而，在使用 Vue Router 时，我们经常会遇到两个重要的概念：`this.$router` 和 `this.$route`。虽然这两个变量看起来很相似，但它们实际上是有区别的。

**1. `this.$router`**

`this.$router` 是一个 Vue Router 实例，代表整个应用中的路由系统。它提供了许多方法和属性来帮助我们管理路由，例如：

* `push()`: 将用户导航到新的 URL。
* `replace()`: 替换当前的 URL。
* `go(n)`: 前进或后退 n 步。
* `back()`: 后退一步。
* `forward()`: 前进一步。

我们可以通过注入 `$router` 到 Vue 实例中来使用它。例如：

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue')
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue')
 }
 ]
})

export default router

在组件中，我们可以通过 `this.$router` 来访问这个实例：

javascript<template>
 <div>
 <button @click="goHome">返回首页</button>
 </div>
</template>

<script>
export default {
 methods: {
 goHome() {
 this.$router.push('/')
 }
 }
}
</script>

**2. `this.$route`**

`this.$route` 是一个当前路由的对象，包含了当前 URL 的信息。它提供了以下属性：

* `path`: 当前 URL。
* `params`: URL 中的参数。
* `query`: URL 中的查询字符串。

我们可以通过注入 `$route` 到 Vue 实例中来使用它。例如：

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
 routes: [
 {
 path: '/user/:id',
 name: 'user',
 component: () => import('@/views/User.vue')
 }
 ]
})

export default router

在组件中，我们可以通过 `this.$route` 来访问当前路由的信息：

javascript<template>
 <div>
 <h1>用户 ID: {{ $route.params.id }}</h1>
 </div>
</template>

<script>
export default {
 mounted() {
 console.log(this.$route)
 }
}
</script>

**总结**

`this.$router` 和 `this.$route` 是 Vue Router 中两个重要的概念。`this.$router` 是一个 Vue Router 实例，提供了许多方法和属性来帮助我们管理路由，而 `this.$route` 是当前路由的对象，包含了当前 URL 的信息。通过理解这两个变量的区别，我们可以更好地使用 Vue Router 来管理我们的应用中的路由。

**参考**

* [Vue Router 文档]( />* [Vue Router API](