vue中router-link使用及使用示例

`<router-link>` 是 Vue.js 提供的一个组件，用于实现页面之间的跳转。它可以将点击事件转化为 URL 跳转，并且支持浏览器的前进和后退等操作，让单页应用的路由变得更加方便和友好。

下面是一个基本的使用示例：

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

上面的代码中，我们使用了 `<router-link>` 组件，并将 `to` 属性设置为 `/about`，表示点击链接后将跳转到 `/about` 页面。在组件内部，我们可以像使用普通的 HTML 标签一样来编写链接的文本内容。

除了 `to` 属性之外，`<router-link>` 还可以接收其他一些属性，用于定制链接的行为和样式。例如：

<router-link
  to="/about"
  tag="button"
  active-class="active"
  exact
  :append="true"
>
  关于我们
</router-link>

这里我们使用了 `tag` 属性将链接变成了一个按钮，使用了 `active-class` 属性表示在当前页面时给链接添加一个 `active` 样式，使用了 `exact` 属性表示只有在路径完全匹配时才添加 `active` 样式，最后使用了 `:append` 属性表示在当前路径后面追加 `/about`。

总的来说，使用 `<router-link>` 组件可以让我们更加方便地实现页面之间的跳转，并且提供了很多有用的属性来满足不同的需求。