Vue Router API总结（6）

1.守卫分类

全局守卫：

router.beforeEach((to, from, next) => {
  /* 必须调用 `next` */
})

router.beforeResolve((to, from, next) => {
  /* 必须调用 `next` */
})

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

路由配置中的守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件中守卫：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }
}

2.router-link

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active
<router-link> Props:

to
replace
append
tag
active-class
exact
event
exact-active-class

v-slot API (3.1.0 新增)
将激活的 class 应用在外层元素

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>
href：解析后的 URL。将会作为一个 a 元素的 href attribute。
route：解析后的规范化的地址。
navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class 

append
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

active-class
默认值: “router-link-active”
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

exact
默认值: false
“是否激活”默认类名的依据是包含匹配。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。
按照这个规则，每个路由都会激活 <router-link to="/">！想要链接使用“精确匹配模式”，则使用 exact 属性：

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact></router-link>

event
类型: string | Array<string>
默认值: ‘click’
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

exact-active-class
类型: string
默认值: “router-link-exact-active”
配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

3.router-view

<router-view> Props:

name

<router-view> 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。
其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件， 可以从$attr中拿到。很多时候，每个路由的数据都是包含在路由参数中。

4.Router 构建选项

	routes
	mode
	base
	linkActiveClass
	linkExactActiveClass
	scrollBehavior
	parseQuery / stringifyQuery
	fallback

routes

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // 命名路由
  components?: { [name: string]: Component }, // 命名视图组件
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  meta?: any,

  // 2.6.0+
  caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object // 编译正则的选项
}

mode
默认值: “hash” (浏览器环境) | “abstract” (Node.js 环境)
可选值: “hash” | “history” | “abstract”

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

base
类型: string
默认值: “/”
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”。

linkActiveClass
类型: string
默认值: “router-link-active”
全局配置 <router-link> 默认的激活的 class。参考 router-link。

linkExactActiveClass
默认值: “router-link-exact-active”
全局配置 <router-link> 默认的精确激活的 class。可同时翻阅 router-link。

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

fallback
类型: boolean
当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。

在 IE9 中，设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用，因为一个 hash 模式的 URL 并不支持服务端渲染。

5.Router 实例属性

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

router.mode
路由使用的模式。

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

6.Router 实例方法

router.beforeEach
router.beforeResolve
router.afterEach
router.push
router.replace
router.go
router.back
router.forward
router.getMatchedComponents
router.resolve
router.addRoutes
router.onReady
router.onError

router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

router.getMatchedComponents
返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。通常在服务端渲染的数据预加载时使用。

router.resolve

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)

解析目标位置 (格式和 的 to prop 一样)。

current 是当前默认的路由 (通常你不需要改变它)
append 允许你在 current 路由上附加路径 (如同 router-link)

router.addRoutes

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

router.onReady

router.onReady(callback, [errorCallback])

该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

这可以有效确保服务端渲染时服务端和客户端输出的一致。
第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。

router.onError

router.onError(callback)

注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：

1. 错误在一个路由守卫函数中被同步抛出；
2. 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
3. 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

7.路由对象属性

$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
一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

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

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

$route.name
当前路由的名称，如果有的话。(查看命名路由)

$route.redirectedFrom
如果存在重定向，即为重定向来源的路由的名字。(参阅重定向和别名)

8.组件注入

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

this.$router
router 实例。

this.$route
当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。