Router对象、Route对象、声明式导航、编程式导航

Router和Route

当我们创建实例VueRouter时

let router =  new VueRouter();

会有一个全局的router路由器对象， 这个路由器对象在其他路由组件上可以通过路由组件的实例.$router的方式访问到

当跳转到一个新的路由时，会创建一个新的route实例对象，每一个路由实例都是唯一的， 保存着当前路由的状态信息。

注意：在应用中只存在唯一的Router对象，在每个路由组件中访问到的Router对象都是一个Router实例，互相之间是相同的，但是每个路由之间的route是不相同的。

---

属性方法

$router

console.log(this. $ router);

• 属性

属性	描述
options	保存了创建路由的原始配置对象
currentRoute	当前路由的地址信息和this.$route一致

• 方法

 + 方法
          - addRoute(parentName, route) :  添加一条行的路由记录到路由
          - afterEach(to, from, failure) : 全局的路由导航后置守卫， 每次在切换路由后执行
          - beforeEach(to, from, failure): 全局的路由导航前置守卫， 每次在切换路由前执行

          - push({
              path:路由路径,
              name:路由名称,
              query:{}传递的query参数,
              params:{}传递的params参数,
          }): 跳转到一个路由，以编程式导航的方式跳转, 传入一个对象
                    与声明式路由导航配置属性一致，因为是向记录栈中推入一条记录
                    所以跳转后回退 会回退到 之前的路由记录(未替换)

          - replace({}) : 跳转到一个路由 ，以编程式导航的方式导航，参数和push一致
                          因为将路由记录栈的当前记录给替换了，所以跳转后不能回退到之前的记录
                          只能回退到之前记录的上一条记录(已替换)

          - resolve({}): 跳转到一个新的页面，参数和push一致

          - back(): 回退到上一个路由

          - forward(): 在历史路由向前进一个路由记录

          - getRoutes(): 获取路由的完整列表

          - go(num): 在历史路由记录中前进或后退，前或后取决于参数的正负

          - hasRoute(routeName): 检测是否有指定name的路由

          - removeRoute(routeName): 移除路由记录栈中对应名称的路由记录

          - onError(function(err)···): 捕获导航期间发生的错误

---

$route

console.log(this.$route);

 - fullPath : 跳转该路由的完整路径

 - hash： 当前路由的hash值， 无则为空

 - meta： 路由元信息

 - name：路由定义的名称

 - matched ：  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
   
 - path： 对应当前路由的绝对路径（获取）

 - params： 当前路由的params参数（获取）

 - query： 当前路由的query参数（获取）

---

声明式导航和函数式导航

导航：

​ 一个路由被执行一次，就是一次导航。导航可以分为声明式导航和编程式导航。

声明式导航：

一个路由组件(如 router-link)通过点击等方式实现路由跳转，这个过程称为“声明式导航(静态)”。

编程式导航：
切换执行并不通过声明式导航实现，通过程序代码的方式给实现出来，就是“编程式导航(动态)”。

编程式导航的实现：
通过路由器对象直接使用js代码操作

1.声明式导航是直接渲染到页面的，比如a链接
2.编程式导航则是用在js处理逻辑后需要页面跳转，比如点击button按钮跳转