$router 和 $route的区别

一、$router

router是VueRouter的实例方法，相当于一个全局的路由器对象，作用是进行路由跳转的！就像jQuery里的window.location一样，起到的是导航的作用。里面含有很多属性和子对象，例如history对象，导航到不同url，可以使用this.

路由实例方法：

1、push

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

this.$router.push会往history栈中添加一个新的记录，，当我们点击浏览器的返回按钮时可以看到之前的页面。 详细见vue官方文档编程式的导航 | Vue Router

2.replace

 //push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
 不会向 history 栈添加一个新的记录
// 一般使用replace来做404页面
this.$router.replace('/')

配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径，就不会一直嵌套之前的路径

二、$route对象

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等

1、route.path

字符串，对应当前路由的路径，总是解析为绝对路径

2.route.params

一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

3、route.query

一个key/value对象，表示URL查询参数，例如：对于路径 /foo?user=1,则有route.query.user == 1， 如果没有查询参数，则是个空对象。

4.route.fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。