vue中this.$router和this.$route的区别

vue官网给this.$router和this.$route下的定义：

• this.$router

router 实例。

• this.$route

当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

this.$router：是全局路由器 router 的实例，可以在任何组件内进行访问，路由实例里面有很多属性和方法，下面举个例子：

// 我们常用到的路由跳转
this.$router.push('/home');

更多属性和方法，大家可以去 vue 官网查询，具体地址

this.$route：是当前页面的路由信息对象，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)，也有一些属性，下面举个例子：

this.$route.query.index // 接收通过 query 传过来的index

综合应用：

我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}