面试题：Vue Router 有什么作用？它有哪些组件？

这是一个关于 Vue 生态系统核心库 Vue Router 的基础但重要的面试题。以下是全面的解答：

Vue Router 有什么作用？

Vue Router 是 Vue.js 官方的路由管理器（Routing Library）。它为 Vue.js 单页应用（SPA – Single Page Application）提供了完整的路由解决方案，其核心作用是：

实现单页应用（SPA）的视图切换：
- 在传统的多页应用中，切换页面需要向服务器请求新的 HTML 文件，导致页面整体刷新。
- Vue Router 通过监听 URL 的变化（使用 history 模式或 hash 模式），在不重新加载整个页面的前提下，动态地渲染不同的组件到指定位置。这使得用户体验更流畅，接近原生应用。
将 URL 与组件进行映射：
- 它允许开发者定义一组路由规则（Route），每个规则将一个 URL 路径（如 /home、/about）映射到一个 Vue 组件。
- 当用户访问某个 URL 时，Vue Router 会找到匹配的路由，并将对应的组件渲染到 <router-view> 中。
管理应用的导航状态：
- 它维护了当前的路由状态（当前路径、参数、查询等），并提供了编程式导航（如 router.push()）和声明式导航（如 <router-link>）的能力。
支持动态路由、嵌套路由和路由参数：
- 可以处理包含动态参数的 URL（如 /user/:id）。
- 支持构建复杂的嵌套视图结构（如主布局包含侧边栏和内容区）。
- 可以传递和获取路由参数（params）和查询参数（query）。
提供导航守卫（Navigation Guards）：
- 允许在路由跳转前、跳转后或跳转过程中执行逻辑，常用于权限验证、页面加载提示、未保存数据的提醒等。
支持路由懒加载（Lazy Loading）：
- 可以将不同路由对应的组件分割成不同的代码块，只有在访问该路由时才加载对应的组件代码，有效减少首屏加载时间，优化性能。

总结：Vue Router 的核心作用是让 Vue 应用能够根据不同的 URL 显示不同的内容，实现无刷新的页面切换，从而构建现代化的单页应用。

Vue Router 有哪些组件？

Vue Router 提供了几个内置的全局组件，可以直接在模板中使用：

<router-link>
- 作用：用于实现声明式导航的组件。它是用户进行页面跳转的主要方式。
- 特点：
  - 渲染为一个 <a> 标签（默认），但点击时不会导致页面刷新。
  - 通过 to 属性指定要跳转的目标路径（如 to="/home" 或 :to="{ name: 'user', params: { id: 123 } }"）。
  - 自动应用 CSS 类名（如 .router-link-active, .router-link-exact-active）来表示当前激活的链接，方便样式定制。
  - 支持 replace 属性（不留下历史记录）和 append 属性（在当前路径后追加）。
<router-view>
- 作用：这是 Vue Router 的视图出口（View Outlet）。它是路由匹配到的组件将被渲染到的位置。
- 特点：
  - 是一个功能性组件，本身不渲染额外的 DOM 元素（只是一个占位符）。
  - 匹配到的路由组件会渲染在这里。
  - 支持嵌套，可以创建复杂的布局（如侧边栏、页头、页脚 + 主内容区）。
  - 可以通过 name 属性命名，实现命名视图（Named Views），允许在同一个路径下同时渲染多个不同组件。
<RouterView> (Vue 3 Composition API 中的写法)
- 在使用 <script setup> 或 Composition API 的项目中，<router-view> 也可以写作 <RouterView>（大驼峰命名），两者功能完全相同。这是 Vue 3 中组件导入和使用的常见风格。

补充说明：

虽然 useRouter() 和 useRoute() 是非常重要的 Composable 函数（不是组件），但它们不属于“组件”范畴。它们分别用于在 setup 中获取路由器实例和当前路由信息。

总结

问题	解答
Vue Router 的作用	Vue.js 的官方路由管理器，用于构建单页应用（SPA）。它通过映射 URL 到组件，实现无刷新的视图切换，管理导航状态，并支持动态路由、嵌套路由、路由守卫和懒加载等高级功能。
Vue Router 的组件	主要有两个： 1. `<router-link>`：用于声明式导航，生成可点击的链接。 2. `<router-view>`：作为视图出口，渲染匹配到的路由组件。（在 Vue 3 中也可写作 `<RouterView>`）

THE END

Vue 基础面试题