Vue中this.$router和this.$route的区别及push()方法

Vue中的this.$router和this.$route都是Vue Router提供的路由对象，它们的区别和作用如下：

• this.$router是Vue Router实例，用来操作路由的跳转、钩子函数等等；
• this.$route是当前活跃的路由对象，包含了当前路由的各种信息，如参数、路径、路由器地址等。

下面来详细讲解一下Vue中router和route的区别及push()方法。

1. 区别

Vue Router提供了统一的路由管理机制，使得Vue SPA的路由管理变得非常方便。在Vue组件中，经常需要用到路由来实现界面跳转、参数传递等功能。

this.$router和this.$route是Vue Router框架中非常重要的两个对象。this.$router是Vue Router实例对象，它用来跳转路由、携带参数等，比如我们可以通过this.$router.push('/path')来实现路由的跳转；而this.$route是当前激活的路由对象，它包含了当前路由的各种信息。

2. push()方法

在Vue中，我们可以使用this.$router.push()方法来实现路由的跳转，在跳转路由时，我们还可以通过该方法进行参数的传递，例如：

// 在路由中传递参数
this.$router.push({path: '/path', query: {id: 1}})

其中，path表示路由路径，query表示路由中参数部分（由"?"和参数组成），{id: 1}就是具体的参数信息了。在路由的组件内部，我们可以通过this.$route.query.id来获取到参数。

举个具体的例子，比如我们有一个简单的路径为/home的路由，在组件中我们通过this.$router.push()的方法进行路由跳转，并传递了一个参数username，如下所示：

this.$router.push({path: '/home', query: {username: 'Lucy'}})

在/home路由的组件中，定义了一个computed计算属性来获取该参数：

computed: {
  username () {
    return this.$route.query.username || 'no username'
  }
}

在/home路由的组件中添加一个p标签来展示username属性中的值：

<template>
  <div class="home">
    <p>{{username}}</p>
  </div>
</template>

这样，当我们在组件中使用this.$router.push()方法跳转到/home路由时，在该路由中就可以获取到参数信息了。

总结：

• this.$router是Vue Router实例，用来操作路由的跳转、钩子函数等等；
• this.$route是当前活跃的路由对象，包含了当前路由的各种信息；
• this.$router.push()方法可以用来实现路由的跳转，并在跳转时传递参数。