vue中router与route的区别

router
router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

路由实例方法：

1、push
1.字符串this.$router.push(‘home’)

2. 对象this.$router.push({path:'home'})

3. 命名的路由this.$router.push({name:'user',params:{userId:123}})

4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})

push方法其实和<router-link :to="...">是等同的。

注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

2、go
页面路由跳转

 前进或者后退this.$router.go(-1)  // 后退

3、replace
push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，

不会向 history 栈添加一个新的记录

4.一般使用replace来做404页面
this.$router.replace(’/’)

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

$router对象是全局路由的实例，是router构造方法的实例。

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

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。

$route.params
对象，包含路由中的动态片段和全匹配片段的键值对

$route.query对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes，会得到$route.query.favorite == ‘yes’ 。

$route.router
路由规则所属的路由器（以及其所属的组件）。

$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。

$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，主要用于接收路由传递的参数