路由实例

   // 创建路由实例
   var router = new VueRouter({
       // 构造配置
       routes：[
         // 路由规则（或称为：路由记录）
         {...},{...}
      ]
   });

将路由实例挂载到 Vue 根实例后，以下属性会被注入到每个组件中：

[1] $router    路由实例

# 实例属性

• router.app                             挂载了路由实例的 Vue 根实例
• router.mode                         路由的使用模式
• router.currentRoute           当前激活的路由信息对象，等同于 $route

# 实例方法

• router.beforeEach(guard)         导航守卫
• router.forward()                          动态的导航到一个新 url

[2] $route    当前激活的路由信息对象                    // 只读，里面的属性是不可变的，不过可以通过 watch 监测

$route，用于表示当前激活的路由的状态信息，其中包含了当前 URL 解析得到的信息，以及 URL 匹配到的路由规则。

• $route.path  对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"
• $route.params  一个 key/value 对象，包含了 动态片段和全匹配片段，如果没有路由参数，就是一个空对象
• $route.query  一个 key/value 对象，表示 URL 查询参数。如，路径 /foo?user=1，则有 $route.query.user = 1
• $route.hash  当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
• $route.fullPath  完成解析后的 URL，包含查询参数和 hash 的完整路径
• $route.matched  一个数组，包含当前路由的所有嵌套路径片段的路由记录（ 路由规则 ）

const router = new VueRouter({
  routes: [
    // 下面的对象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 这也是个 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

# 当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象（副本）

• $route.name 当前路由的名称，如果有的话

$route，是不可变的，每次成功导航后，都会产生一个新的对象，它可以出现在多个地方：

1. 组件内的 this.$route 和 $route watcher 回调（ 监测变化处理 ）

2. rouer.match(location) 的返回值

3. 导航钩子的参数

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})

4. scrollBehavior 方法的参数

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 都是 路由信息对象
  }
})