vue-router

vue-router

1. <router-link>

1.1 概述

1.<router-link>组件支持用户在具有路由功能的应用中（点击）导航。

2.通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。

3.另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。

1.2 优点

1.无论是HTML5history模式还是hash模式，它的表现行为一致，所以，当要切换路由模式，或者在IE9降级使用hash模式，无须作任何变动。

2.在HTML5history模式下，router-link会守卫点击事件，让浏览器不再重新加载页面。

3.在HTML5history模式下使用base选项后，所有的to属性都不需要写（基路径）了。

1.3 将激活class应用在外层元素

有时候我们要让激活class应用在外层元素，而不是<a>标签本身，可以用<router-link>渲染外层元素，包裹着内层的原生<a>标签。

<router-link tag="li" to="/foo">
    <a>/foo</a>
</router-link>

<a>将作为真正的链接（它会获得正确的href），而激活时的CSS类名则设置到外层的<li>。

1.4 Props

1. to

类型：string | Location

required

表示目标路由的链接。当被点击后，内部会立即把to的值传=传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2. replace

类型：boolean

默认值：false

设置replace属性，当点击时，会调用router.replace()而不是router.push(),于是导航后不会留下history记录。

3. append

类型：boolean

默认值：false

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

4. tag

类型：string

默认值：“a”

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

5. active-class

类型：string

默认值：“router-link-active”

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

6. exact

类型：boolean

默认值：false

“是否激活” 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。

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

7.exact-active-class

类型：string

默认值：“router-link-exact-active”

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

2. <router-view>

2.1 概述

<router-view>组件是一个functional组件，渲染路径匹配到的视图组件。

<router-view>渲染的组件还可以内嵌自己的<router-view>，根据嵌套组件，渲染嵌套组件。

其他属性（非router-view使用的属性）都可以直接传给渲染的组件。很多时候，每个路由的数据都是包含在路由的参数中。

可以配合<transition>和<keep-alive>使用。如果两个结合一起使用，要确保在内层使用<keep-alive>。

<transition>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</transition>

2.2 Props

1. name

类型：string

默认值：“default”

如果设置了name，则会渲染对应的路由配置中components下的相应组件。

3. Router构建选项

1. routes

类型：Array<RouteConfig>

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; // 编译正则的选项

2. mode

类型：string

默认值：“hash”（浏览器环境）| “abstract”（Node.js环境）

可选值：“hash” | “history” | “abstract”

配置路由模式:

1. hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
2. history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
3. abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

3. base

类型：string

默认值："/"

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

4.linkActiveClass

类型: string

默认值: “router-link-active”

全局配置 <router-link> 的默认“激活 class 类名”。

5. linkExactActiveClass

类型: string

默认值: “router-link-exact-active”

全局配置 <router-link> 精确激活的默认的 class。