面试题：什么是 Vue Router 的 router-link 组件？

<router-link> 是 Vue Router 提供的一个内置组件，用于在 Vue 应用中实现导航功能。它类似于 HTML 中的 <a> 标签，但不会触发页面刷新，而是通过 Vue Router 实现前端路由的无刷新跳转。

一、`<router-link>` 的作用

实现路由跳转：通过 to 属性指定目标路由。
无刷新跳转：使用 Vue Router 的前端路由机制，不会重新加载页面。
自动激活样式：当目标路由匹配时，会自动添加激活类（默认是 router-link-active 或 router-link-exact-active），方便设置样式。

二、`<router-link>` 的基本用法

1. 跳转到指定路径

通过 to 属性指定目标路径。

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

2. 跳转到命名路由

通过 :to 绑定一个对象，指定 name 和 params 或 query。

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

3. 带查询参数

通过 query 传递查询参数。

<router-link :to="{ path: '/search', query: { q: 'vue' } }">Search</router-link>

三、`<router-link>` 的常用属性

1. `to`

作用：指定目标路由。
类型：string | Location（可以是路径字符串或路由对象）。
示例：

  <router-link to="/about">About</router-link>
  <router-link :to="{ name: 'profile', params: { id: 1 } }">Profile</router-link>

2. `replace`

作用：使用 replace 方法跳转，不会向历史记录中添加新记录。
类型：boolean。
示例：

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

3. `tag`

作用：指定渲染的标签类型（默认是 <a>）。
类型：string。
示例：

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

4. `active-class`

作用：指定激活时的 CSS 类名（默认是 router-link-active）。
类型：string。
示例：

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

5. `exact-active-class`

作用：指定精确匹配时的 CSS 类名（默认是 router-link-exact-active）。
类型：string。
示例：

  <router-link to="/home" exact-active-class="exact-active-link">Home</router-link>

6. `exact`

作用：是否精确匹配路由（默认是模糊匹配）。
类型：boolean。
示例：

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

四、`<router-link>` 的激活类

当 <router-link> 的目标路由匹配时，会自动添加以下类：

router-link-active：当目标路由匹配时添加。
router-link-exact-active：当目标路由精确匹配时添加。

可以通过 active-class 和 exact-active-class 自定义类名。

五、`<router-link>` 的示例

1. 基本用法

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

2. 带参数和查询

<template>
  <div>
    <router-link :to="{ name: 'user', params: { id: 1 } }">User 1</router-link>
    <router-link :to="{ path: '/search', query: { q: 'vue' } }">Search</router-link>
  </div>
</template>

3. 自定义激活类

<template>
  <div>
    <router-link to="/home" active-class="active" exact-active-class="exact-active">Home</router-link>
  </div>
</template>

<style>
.active {
  color: red;
}
.exact-active {
  font-weight: bold;
}
</style>