vue路由——总结篇（二）

上一篇总结，我们了解了路由中涉及的几个组件和组件属性。那么这一章我们去了解一下路由对象的构建选项。

routes构建选项

routes是最主要的构建选项。在基础篇和进阶篇我们也使用过，那么这里我们只是做一个总结，不具体阐述用法。

1. path选项：数据类型是字符串。它主要用于匹配具体路由地址；
2. component选项：它主要用定义路由对象使用组件；
3. name选项：数据类型是字符串。它主要是给该路由对象命名；
4. components选项：数据类型是对象。对象值是组件。它主要用于命名视图；
5. redirect选项：数据类型是string | Location | Function。它主要用于路由重定向；
6. props选项：数据类型是boolean | Object | Function。它主要用于路遥组件传参；
7. alias选项：数据类型是string | Array<string>。它主要用于定义路由别名；
8. children选项：数据类型是Array<RouteConfig>。它主要用于路由嵌套；
9. beforeEnter选项：它是一个函数，主要用于路由独享守卫；
10. meta选项：用于存放数。

mode构建选项

mode构建选项是用于设置路由的模式，mode只有hash、history、abstract三个可选值，默认值是hash。这三个值分别表示的意思是：

1. hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

2. history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

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

base构建选项

base构建选项是应用的基路径，例如如果整个单页应用服务在 /app/下，然后 base 就应该设为 /app/

linkActiveClass 和 linkExactActiveClass构建选项

linkActiveClass 和linkExactActiveClass构建选项主要用于全局配置 ·· 默认的激活的 class和精确激活的 class。见具体实例：

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/books">图书</router-link>
    <router-view />
  </div>
</template>

此时渲染之后页面上显示的结果是

<a  href="/" class="router-link-exact-active router-link-active">首页</a>
<a  href="/">图书</a>

对 class 进行配置:

{
    mode: 'history',
    routes,
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active'
}

配置之后结果如下所示：

<a  href="/" class="exact-active active">首页</a>
<a  href="/">图书</a>

fallback构建选项

fallback构建选项用于当浏览器不支持 history.pushState 控制路由是否应该回退到 hash模式。默认值为 true。

parseQuery 和 stringifyQuery构建选项

parseQuery 和 stringifyQuery构建选项用于提供query的解析/反解析函数。vue 会默认处理，如果有特定需求，可以借助这两个配置项。

{
    mode: 'history',
    routes,
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active',
    parseQuery(query) {},
    stringifyQuery(obj) {}
}