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

<router-link> 是 Vue Router 提供的一个全局组件，用于在单页面应用（SPA）中实现声明式的、可访问的导航链接。它是构建应用导航结构的基础工具。

简单来说，<router-link> 就是 Vue 版的 <a> 标签，但它不会导致页面重新加载，而是通过 Vue Router 在内部进行路由切换，实现无刷新的视图更新。

核心作用

实现页面内导航：点击 <router-link> 会更新 URL 并触发 Vue Router 加载对应的组件，但不会向服务器发送请求或刷新整个页面。
生成可访问的链接：它最终会渲染成一个标准的 <a> 标签，保证了良好的可访问性（Accessibility），支持键盘导航、屏幕阅读器等。
管理激活状态：可以自动为当前激活的路由链接添加特定的 CSS 类名，方便进行样式设计（如高亮当前菜单项）。

基本用法

<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

to 属性：指定目标路由的路径（如 /home）或路由对象（如 { name: 'user', params: { id: 123 } }）。
渲染结果：通常会生成一个 <a href="/home">首页</a> 这样的 HTML 链接。

主要属性 (Props)

属性	类型	说明
`to`	`string \| object`	必需。指定目标路由的路径或路由对象。
`replace`	`boolean`	如果设置为 `true`，导航时会调用 `router.replace()` 而不是 `router.push()`，不会在浏览器历史中留下记录。
`append`	`boolean`	如果设置为 `true`，则在当前路径前附加 `to` 的路径。例如，从 `/a` 导航到 `b`，会变成 `/a/b`。
`tag`	`string`	指定 `<router-link>` 渲染成什么标签。默认是 `<a>`。例如 `tag="li"` 会渲染成 `<li>`。
`active-class`	`string`	自定义激活状态的 CSS 类名。默认是 `router-link-active`。
`exact-active-class`	`string`	自定义精确激活状态的 CSS 类名。默认是 `router-link-exact-active`。
`exact`	`boolean`	（已废弃）控制激活类名的匹配行为。

激活状态 (Active Class)

<router-link> 会根据当前路由自动应用 CSS 类名：

router-link-active：
- 当链接对应的路由被包含时应用。
- 例如：当前路径是 /users/1，那么 /users 和 /users/1 的 <router-link> 都会拥有这个类。
router-link-exact-active：
- 当链接对应的路由完全匹配时应用。
- 例如：只有当前路径是 /users 时，/users 的 <router-link> 才会有这个类。

示例：高亮当前菜单

<style>
.router-link-active {
  font-weight: bold;
  color: blue;
}
</style>

<template>
  <nav>
    <router-link to="/" exact>首页</router-link>
    <router-link to="/users">用户列表</router-link>
    <router-link to="/users/profile">个人资料</router-link>
  </nav>
</template>

访问 /users 时，”用户列表” 和 “个人资料” 的链接都会高亮（因为 /users 包含在 /users/profile 中）。
访问 / 时，只有”首页”高亮（使用 exact 确保只有完全匹配时才激活）。

与普通 `<a>` 标签的区别

特性	`<router-link>`	普通 `<a>` 标签
页面刷新	❌ 不会刷新页面	✅ 会刷新页面
路由切换	✅ 使用 Vue Router 内部机制	❌ 向服务器发起新请求
History 记录	✅ 默认添加新记录（可配置）	✅ 添加新记录
可访问性	✅ 支持	✅ 支持
语义化	✅ 专为 SPA 导航设计	✅ 通用链接

总结

<router-link> 是 Vue Router 的核心组件之一，它提供了一种声明式、无刷新、可访问的方式来实现单页面应用内的导航。通过 to 属性指定目标，利用 active-class 管理激活状态，并且可以配置 replace、append 等行为，是构建 Vue 应用导航栏、菜单等 UI 元素的首选方式。

THE END

Vue 基础面试题