Vue 路由 (vue-router) 详细总结

一、传统 web 应用与单页面 web 应用

1.1 传统 web 应用

传统 web 应用由多个 HTML 页面组成，页面切换时会重新加载整个页面，导致用户体验不够流畅，对服务器压力较大。

1.2 单页面 web 应用 (SPA)

单页面应用只有一个 HTML 页面，通过 JavaScript 动态更新页面内容，实现局部刷新，具有以下特点：

• 用户体验好：响应性强，类似桌面应用的即时性。
• 服务器压力小：服务器只需提供数据，不负责页面渲染。
• 前后端分离：前端专注于界面和交互，后端提供 API，便于团队协作和代码维护。

但也存在一些缺点：

• 首次加载耗时：需加载所有资源，初始加载时间较长。
• SEO 不友好：搜索引擎不易爬取动态内容，影响搜索引擎优化。
• 开发复杂度高：需管理页面状态和复杂交互，对开发者要求较高。

二、路由与路由器

2.1 路由 (route)

路由是 URL 路径与对应组件之间的映射关系，由路径 (key) 和组件 (value) 组成，用于确定访问特定 URL 时渲染的组件。

2.2 路由器 (router)

路由器用于管理多个路由，负责调度和管理应用中的所有路由规则，决定不同路径下显示的组件。

三、Vue 路由的使用

3.1 创建组件

使用 Vue 创建组件，如 app.vue、MyHeader.vue、MyFooter.vue、Home.vue 等，通过