this.$route和this.$router区别以及this.$router详解
区别
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。
this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击
this.$router详解
this.$router.push()
//url字符串
this.$router.push('/home')
//对象
this.$router.push({path:'home'})
//命名的路由
this.$router.push({name:'user', params:{userId: '123'}})
//带查询参数，变成 /register?plan=private
this.$router.push({path:'register', query:{plan:private}})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123';
this.$router.push({path:`/user/${userId}`}); //->/user/123
this.$router.push({name:'user', params:{userId}}); //->/user/123
//这里的 params 不生效
this.$router.push({path:'/user', params:{userId}}); //->/user
同样的规则也适用于 router-link 组件的 to 属性。
总结：
params 传参，push 里面只能是 name:'xxx'，不能是 path:'/xxx'，因为 params 只能用 name 来引入路由，如果这里写成了 path ，接收参数页面会是 undefined。
路由传参的方式：
//手写完整的 path:
this.$router.push({path: `/user/${userId}`});
//获取参数：
this.$route.params.userId
//用 params 传递：
this.$router.push({name:'user', params:{userId: '123'}});
//获取参数：
this.$route.params.userId
//url 形式：url 不带参数，http:localhost:8080/#/user
//用 query 传递：
this.$router.push({path:'/user', query:{userId: '123'}});
//获取参数：
this.$route.query.userId
//url 形式：url 带参数，http:localhost:8080/#/user?userId=123
直白的说，query 相当于 get 请求，页面跳转的时候可以在地址栏看到请求参数，params 相当于 post 请求，参数不在地址栏中显示。
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
//前进一步，等同于history.forward()
router.go(1)
//后退一步，等同于history.back()
router.go(-1)
//前进3步
router.go(3)
//如果history记录不够用，就默默
