181vue-Router

Posted 2021-03-07 gushixianqiancheng

1、构建选项
（1）routes
（2）mode，配置路由模式
（3）base，应用的基路径
（4）linkActiveClass，默认的激活的class
（5）linkExactActiveClass，默认的精确激活的class
（6）scrollBehavior
2、实例属性
（1）router.app，配置了router的Vue根实例。
（2）router.mode，路由使用的模式。
（3）router.currentRoute，当前路由对应的路由信息对象。
3、实例方法
（1）router.beforeEach
（2）router.beforeResolve
（3）router.afterEach
（4）router.push(location, onComplete?, onAbort?)；router.push(location).then(onComplete).catch(onAbort)
（5）router.replace(location, onComplete?, onAbort?)；router.replace(location).then(onComplete).catch(onAbort)
（6）router.go
（7）router.back
（8）router.forward
（9）router.getMatchedComponents
（10）router.resolve
（11）router.addRoutes
（12）router.onReady
（13）router.onReady(callback, [errorCallback])
（14）router.onError
（15）router.onError(callback)
4、路由对象：
一个路由对象(route object)表示当前激活的路由的状态信息。包含了当前URL解析得到的信息，还有URL匹配到的路由记录(route records)。路由对象是不可变的，每次成功的导航后都会产生一个新的对象。
路由对象出现在多个地方:在组件内，即this.$route；在$route观察者回调内；router.match(location)的返回值。
（1）$route.path，字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
（2）$route.params，一个key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
（3）$route.query，一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
（4）$route.hash，当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
（5）$route.fullPath，类型: string，完成解析后的 URL，包含查询参数和 hash 的完整路径。
（6）$route.matched，类型: Array<RouteRecord>，一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是routes配置数组中的对象副本(还有在children数组)。
const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    {
      path: ‘/foo‘,
      component: Foo,
      children: [
        // 这也是个路由记录
        { path: ‘bar‘, component: Bar }
      ]
    }
  ]
})
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
（1）$route.name，当前路由的名称，如果有的话。(查看命名路由)
（2）$route.redirectedFrom，如果存在重定向，即为重定向来源的路由的名字。(参阅重定向和别名)
5、组件注入
注入的属性。通过在Vue根实例的router配置传入router实例，下面这些属性成员会被注入到每个子组件。
（1）this.$router：router实例。
（2）this.$route：当前激活的路由信息对象。这个属性是只读的，里面的属性是immutable(不可变)的，不过你可以watch(监测变化)它。
增加的组件配置选项
（3）beforeRouteEnter
（4）beforeRouteUpdate
（5）beforeRouteLeave