vueRouter的$route和$router的解析和运用场景

最近在写公司的项目，要用到路由中的参数，记不起来这个参数是怎么取出来的，索性就一次性讲明白好了：

1、区分一下$route和 $router 对象：

$route对象包含地址栏url的信息，比如path，name（路由的名称）这些属性。
$router对象是一下控制路由的方法，比如replace(‘/index’)等。
所以以后在区分这两个对象只要记住， $route是用来地址栏url信息读取。 $routers属性是控制路由的方法。

2、 $route属性解析

用这个url作为例子：url = ‘http://10.105.109.12:3000/?p=123/#/index/home/2?s=a&p=y#baby’

1、fullPath—URL 编码与路由地址有关。包括 path、 query 和 hash。
2、hash—已解码 URL 的 hash 部分。总是以 #开头。如果 URL 中没有 hash，则为空字符串。
3、matched —与给定路由地址匹配的标准化的路由记录数组。

4、meta—附加在路由上的信息。
在定义路由时附加

5、name —该路由的名称。如果什么都没提供，则为 undefined。
例如上图就没有命名路由。
6、params—从 path 中提取的已解码参数。
7、path—编码 URL 的 pathname 部分，与路由地址有关。
8、query—路由携带的参数。

3、 $router方法解析

$route的方法特别多，这里就做个常用方法的介绍，想了解全部的可以去官网看router方法
1、push—通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。
例如：this. $router.push('/index')
2、replace—通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。
例如this. $router.replace('/index')，和push的区别是replace是替换掉当前路由，历史记录里就不会再有被替换的这个路由的记录了。
3、go—允许你在历史中前进或后退。
this. $router.go(2) 前进两个路由，this. $router.go(-1) 后退一步。
4、back—如果可能的话，通过调用 history.back() 回溯历史。相当于 router.go(-1)。
5、forward—如果可能的话，通过调用 history.forward() 在历史中前进。相当于 router.go(1)。