Vue-Router API学习

<router-link>

<router-link>组件支持用户在具有路由功能的应用中(点击)导航。通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。

将激活class应用在外层元素

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

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

在这种情况下，<a>将作为真实的链接(它会获得正确的href的)，而"激活时的CSS类名"则设置到外层的<li>。

<router-link> Props

• to
• 类型：string | Location
• required
  表示目标路由的链接。当被点击后，内部会立刻把to的值传到router.push()，所以这个值是一个字符串或是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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

总结：<router-link to>跟this.$router.push()这两种写法是一样的。to如果前面没有:号表示后面跟的是字符串，如果有冒号表示后面跟的是js表达式。

replace

• 类型：boolean
• 默认值：false
  设置replace属性的话，当点击时，会调用router.replace()，而不是router.push()，于是导航后不会留下history记录。

<router-link :to="{path: '/abc'}" replace></router-link>
// 相当于
this.$router.replace()

append

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

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

tag

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

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

active-class

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

exact

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

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

event

• 类型：string | Array
• 默认值：'click'
  声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

exact

<router-view>

<router-view>组件是一个functional组件，渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的<router-view>，根据嵌套路径，渲染嵌套组件。
其他属性(非router-view使用的属性)都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中(例如：利用params或query)。
因为它也是个组件，所以可以配合<transition>和<keep-alive>使用。如果两个结合一起用，要确保在内层使用<keep-alive>：

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

<router-view> Props

name

• 类型：string
• 默认值：'default'
  如果<router-view>设置了名称，则会渲染对应的路由配置中components下的相应组件。

https://juejin.im/post/5b82bcfcf265da4345153343