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

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。它允许开发者通过 URL 映射到不同的组件，从而实现页面之间的切换和导航。以下是 Vue Router 的作用及其核心组件：

1. Vue Router 的作用

实现单页面应用（SPA）：
- 在 SPA 中，页面切换不会重新加载整个页面，而是通过 JavaScript 动态替换内容。
- Vue Router 通过 URL 映射到不同的组件，实现页面内容的动态切换。
管理页面路由：
- 定义路由规则，将 URL 映射到对应的组件。
- 支持嵌套路由、动态路由、路由参数等功能。
实现导航：
- 提供编程式导航（如 router.push）和声明式导航（如 <router-link>）。
路由守卫：
- 提供全局和局部的路由守卫，用于控制路由的访问权限。
懒加载：
- 支持路由组件的懒加载，优化应用性能。

2. Vue Router 的核心组件

Vue Router 提供了以下核心组件和 API：

2.1 `<router-link>`

作用：用于声明式导航，生成一个 <a> 标签，点击后跳转到指定的路由。
属性：
- to：指定目标路由的路径。
- tag：指定渲染的标签（默认是 <a>）。
- active-class：指定激活状态的类名。

示例

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

运行 HTML

2.2 `<router-view>`

作用：用于渲染匹配到的路由组件。
特点：
- 根据当前路由动态渲染对应的组件。
- 支持嵌套路由，可以在父组件的 <router-view> 中渲染子路由组件。

示例

<router-view></router-view>

2.3 `VueRouter` 实例

作用：用于创建路由实例，定义路由规则和配置。
常用配置：
- routes：定义路由规则。
- mode：指定路由模式（hash 或 history）。
- base：指定基础路径。

示例

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

Vue.use(Router);

const router = new Router({
  mode: 'history', // 使用 history 模式
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],
});

export default router;

2.4 路由守卫

作用：用于控制路由的访问权限或在路由切换时执行特定逻辑。
类型：
- 全局守卫：
  - beforeEach：全局前置守卫。
  - beforeResolve：全局解析守卫。
  - afterEach：全局后置钩子。
- 路由独享守卫：
  - beforeEnter：在路由配置中定义。
- 组件内守卫：
  - beforeRouteEnter：进入路由前调用。
  - beforeRouteUpdate：路由参数变化时调用。
  - beforeRouteLeave：离开路由前调用。

示例

router.beforeEach((to, from, next) => {
  if (to.path === '/admin' && !isAuthenticated) {
    next('/login'); // 重定向到登录页
  } else {
    next(); // 继续导航
  }
});

2.5 编程式导航

作用：通过 JavaScript 代码实现路由跳转。
常用方法：
- router.push：跳转到指定路由。
- router.replace：替换当前路由。
- router.go：前进或后退。

示例

this.$router.push('/home'); // 跳转到首页
this.$router.replace('/about'); // 替换当前路由
this.$router.go(-1); // 返回上一页

3. Vue Router 的核心功能

路由映射：将 URL 映射到对应的组件。
嵌套路由：支持多级路由嵌套。
动态路由：支持通过参数动态匹配路由。
路由守卫：控制路由的访问权限。
懒加载：按需加载路由组件，优化性能。
路由模式：支持 hash 和 history 两种模式。

4. 总结

Vue Router 的作用：实现单页面应用的路由管理，支持动态路由、嵌套路由、路由守卫等功能。
核心组件：
- <router-link>：声明式导航。
- <router-view>：渲染匹配的路由组件。
- VueRouter 实例：定义路由规则和配置。
- 路由守卫：控制路由访问权限。
- 编程式导航：通过代码实现路由跳转。