router-link用法

`router-link` 是 Vue.js 中用于声明路由链接的组件。它可以让我们通过点击链接来导航到不同的路由。

使用 `router-link` 组件的方式如下：

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

上面的代码中，`to` 属性指定了链接要导航到的路由路径。在这个例子中，我们将链接导航到 `/home` 路由。

如果想要在 `router-link` 组件中添加其他的元素，可以将它们放在 `router-link` 标签内部，例如：

<router-link to="/home">
  <i class="fa fa-home"></i> Home
</router-link>

上面的代码中，我们在 `router-link` 标签内部添加了一个 `i` 标签，用于显示一个 Home 图标。

在 Vue.js 应用中，`router-link` 组件通常会与路由配置文件一起使用。在路由配置文件中，我们可以声明不同的路由路径和对应的组件，例如：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的代码中，我们声明了两个路由，一个是 `/home` 路由，对应的组件是 `Home`，另一个是 `/about` 路由，对应的组件是 `About`。

现在，我们可以在应用中使用 `router-link` 组件来导航到这些路由了。例如，我们可以在应用的导航栏中添加 `Home` 和 `About` 两个链接：

<nav>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
</nav>

当用户点击这些链接时，应用会自动导航到对应的路由。