vue路由——总结篇（一）

vue路由的基础篇和进阶篇让我了解了vue路由的用法，那么总结篇我们就总结之前的知识，去了解一下关于路由的API。这篇主要了解路由中设计的两个组件<router-link>和<router-view>的相关知识

<router-link>组件

<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。

除了能<router-link>组件定义导航链接，还可以使用其他方式。例如：基础篇（五）所示

//默认渲染 a 标签
 <router-link to="/foo">Go to Foo</router-link>
 //渲染成 li 标签
  <router-link to="/foo" tag="li">Go to Foo</router-link>

<router-link>组件属性

1. to：数据类型是 string 或Location。表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()方法，所以这个值可以是一个字符串或者是描述目标位置的对象。在基础篇（四）有具体讲解

<router-link to="home">Home</router-link>

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2. replace：数据类型是boolean。设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。 router.replace()方法在基础篇（四）有具体讲解

<router-link :to="{ path: '/abc'}" replace></router-link>

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

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

4. tag：数据类型是string，默认值是a。有时候想要 <router-link>渲染成某种标签

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

以上就是<router-link>组件的部分属性。

<router-view>组件

<router-view>组件是一个渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。这个组件可以配合<transition>和、 <keep-alive>使用。如果两个结合一起用，要确保在内层使用 <keep-alive>。

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

<router-view>组件属性

<router-view>组件只有一个属性name属性，它用于给视图命名。具体讲解见基础篇（四）