手摸手学前端：vue路由this.$router和this.$route的区别

前言

最近在学习Vue的路由，总是搞混this.$router和this.$route，现记录一下。

首先，Vue Router官方文档有这么一句：通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由！

由此可知：

1. this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。

   this.$router.push()

   想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

   当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。

   例：

   // 字符串
   router.push('home')
   
   // 对象
   router.push({ path: 'home' })
   
   // 命名的路由
   router.push({ name: 'user', params: { userId: '123' }})
   
   // 带查询参数，变成 /register?plan=private
   router.push({ path: 'register', query: { plan: 'private' }})
   

   注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

   const userId = '123'
   router.push({ name: 'user', params: { userId }}) // -> /user/123
   router.push({ path: `/user/${userId}` }) // -> /user/123
   // 这里的 params 不生效
   router.push({ path: '/user', params: { userId }}) // -> /user
   

   同样的规则也适用于 router-link 组件的 to 属性。

   params 传参，push 里面只能是 name:‘xxx’，不能是 path:’/xxx’，因为 params 只能用 name 来引入路由，如果这里写成了 path ，接收参数页面会是 undefined。

   this.$router.replace()

   跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。点击返回，会跳转到上上一个页面。上一个记录是不存在的。

   this.$router.go()

   这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

   例：

   // 在浏览器记录中前进一步，等同于 history.forward()
   router.go(1)
   
   // 后退一步记录，等同于 history.back()
   router.go(-1)
   
   // 前进 3 步记录
   router.go(3)
   
   // 如果 history 记录不够用，那就默默地失败呗
   router.go(-100)
   router.go(100)
   

2. this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。

总结

this.$route是路由参数对象，所有路由中的参数，params，query都属于它。

this.$router 是一个路由（导航对象），用它方便的使用js 代码，实现路由的前进，后退，跳转到新的url地址。