vue-router API笔记

参考资料：vue-router官方API（https://router.vuejs.org/zh/api/）

一、<router-link>

(1)<router-link>会被默认渲染成<a>标签，也可以通过tag属性设置渲染成其他标签。当目标路由被激活时，链接元素会自动设置一个表示激活的类名。

(2)使用<router-link>而不直接使用<a>的理由：

    1.<router-link>在history模式和hash模式下，表现行为都一致，并且会自动在IE9自动降级使用hash模式

    2.在history模式下，使用router-link，浏览器不会重新加载页面，a标签点击后会重新加载页面

    3.在history模式下，router-link使用base选项时，to属性可以简写。而a一直要写全路径。

(3)<router-link>的v-slot可以获取到底层的一些属性，用来做定制。使用v-slot时，要向router-link中传入一个单独的子元素，否则会被包裹在span中。

    href:解析后的URL。

    route：解析后的规范化地址。

    navigate：导航函数

    isActive：需要应用激活的class为true

    isExactActive:需要应用精确激活的class时为true

(4) router-link的属性

    to:required,目标路由的链接。

    replace:默认false,不会留下新的history记录

    append:默认false, 导航至相对路径时，是在当前路径的基础上

    tag:可以设置该属性，使router-link渲染成其他标签

    active-class:可以另外设置激活时的类名

    exact:默认false,包含匹配，如果to='/',那么所有路径都会被激活，但如果设置exact,只有'/'才会被激活

    event:设置触发导航的事件

    exact-active-class:另外设置精确匹配时的class

二、router-view

渲染路径匹配到的组件。

如果设置name,就可以有多个视图，在各个命名路由里渲染对应组件

三、Router的构建属性

    routes:[],

    mode:"hash" | "history" | "abstract"(node环境)

    base：'/app/'    .应用的基路径

    linkActiveClass:''

    linkExactActiveClass:''

    scrollBehavior: Function.     定义路由切换时页面如何滚动，只在支持history.pushState的浏览器中可用

    parseQuery/stringifyQuery:Function.    提供自定义查询字符串的解析/反解析函数。覆盖默认行为。

    fallback:默认true.当浏览器不支持history.pushState，是否回退到hash模式。在IE9中，如果是false,会使每个router-link都触发整页刷新。

四、Router实例属性

    router.app:配置了router的Vue根实例。

    router.mode:路由使用的模式。

    router.currentRoute:当前路由对应的路由信息对象。

五、Router实例方法

    router.beforeEach((to, from, next) => {})

    router.beforeResolve((to, from, next) => {})

    router.afterEach((to, from) => {})

    router.push()

    router.replace()

    router.go()

    router.back()

    router.forward()

    router.getMatchedComponents()。    返回当前路由匹配的组件数组，通常在服务端渲染的数据预加载时使用

    router.resolve(location, current?,append?)     解析目标位置

    router.addRoutes(routes:Array<RouteConfig>)     动态添加更多路由规则

    router.onReady(callback, [errorCallback])  在路由完成初始导航时回调

    router.onError(callback) 路由导航出错时调用

六、路由对象

一个路由对象表示当前激活的路由的状态信息。

路由对象时不可变的，每次成功导航后都会产生一个新对象。

(1) 路由对象出现的地方：

    · 在组件内，this.$route

    · 在$route 观察者回调内

    · router.match(location)的返回值

    · 导航守卫的参数  router.beforeEach()里的to、from

    · scrollBehavior()方法的参数to、from

(2) 路由对象的属性

    route.path: '/foo/bar'.    绝对路径

    route.params :Object

    route.query ：查询参数

    route.hash：hash值

    route.fullPath : 包含查询参数和hash的完整路径

    route.matched: 数组，包含当前路由的所有嵌套路径片段的路由记录

    route.name

    route.redirectedFrom:如果是重定向来的，则是重定向来源的名称