feat(docs): add interactive demo components for technical appendices
Add placeholder Vue components for visualizing technical concepts across multiple domains including frontend routing, browser rendering, cache design, queue design, database principles, API design, cloud services, and backend evolution. These components provide interactive educational content for the documentation. Update documentation structure to include new appendix sections and enhance existing content with visual components. Remove unused 'codex' dependency from package.json.
This commit is contained in:
sanbuphy
@@ -0,0 +1,575 @@
|
||||
# 前端路由与导航机制
|
||||
|
||||
> **学习指南**：页面跳转不刷新？URL变化但页面没白屏？这就是前端路由的魔法。本文会带你从"传统多页面跳转"的惯性思维，切换到"单页面应用路由"的新世界。
|
||||
|
||||
在阅读前，建议你先具备以下基础：
|
||||
|
||||
- **SPA概念**：了解什么是单页面应用（Single Page Application）
|
||||
- **浏览器History API**：知道 `pushState` 和 `popstate` 事件的存在
|
||||
- **基础正则**：能读懂 `:id`、`*` 这类路由参数写法
|
||||
|
||||
---
|
||||
|
||||
## 0. 引言：为什么需要前端路由？
|
||||
|
||||
还记得传统网站的体验吗？点击一个链接，页面白一下，然后整个页面重新加载。如果网络慢，你还要盯着加载圈发呆几秒。
|
||||
|
||||
**前端路由的出现，彻底改变了这种体验。**
|
||||
|
||||
### 从一个电商网站的演进说起
|
||||
|
||||
2015年，某电商网站（我们叫它"买得多"）还是传统的多页面架构：
|
||||
|
||||
```
|
||||
首页 → 点击商品 → 商品详情页 → 点击购买 → 订单确认页
|
||||
(刷新) (刷新) (刷新) (刷新)
|
||||
```
|
||||
|
||||
**用户吐槽**："每次跳转都要等，感觉好卡！"
|
||||
|
||||
2016年，他们决定升级到SPA架构，引入前端路由：
|
||||
|
||||
```
|
||||
首页 → 商品详情 → 订单确认
|
||||
(无刷新) (无刷新) (无刷新)
|
||||
```
|
||||
|
||||
**用户反馈**："哇，好流畅！像App一样！"
|
||||
|
||||
<RouteMatchingDemo />
|
||||
|
||||
---
|
||||
|
||||
## 1. 核心概念：SPA、路由、导航
|
||||
|
||||
### 1.1 什么是SPA？
|
||||
|
||||
**SPA（Single Page Application，单页面应用）** 是指在浏览器中运行的应用程序，它在首次加载时将所有必要的HTML、CSS和JavaScript下载到本地，之后的页面切换都通过JavaScript动态更新DOM实现，**不会触发完整的页面刷新**。
|
||||
|
||||
**类比理解**：
|
||||
|
||||
> 传统多页面应用（MPA）就像**翻书**——每看一页都要翻到新的一页。
|
||||
> 单页面应用（SPA）就像**幻灯片**——所有内容都在一个屏幕上，只是切换显示区域。
|
||||
|
||||
<SpaNavigationDemo />
|
||||
|
||||
### 1.2 什么是前端路由？
|
||||
|
||||
**前端路由**是SPA中负责管理"当前显示哪个视图"的机制。它通过监听URL的变化，决定渲染哪个组件，同时保证浏览器的前进/后退按钮能正常工作。
|
||||
|
||||
**核心职责**：
|
||||
|
||||
1. **URL ↔ 视图的映射**：定义什么样的URL对应什么样的页面组件
|
||||
2. **导航控制**：处理点击链接、浏览器前进后退等导航行为
|
||||
3. **状态保持**：在URL变化时保持必要的应用状态
|
||||
|
||||
**类比理解**：
|
||||
|
||||
> 前端路由就像是**剧院的节目单和舞台切换系统**：
|
||||
> - 节目单（路由配置）告诉你每个节目（URL）对应什么表演（组件）
|
||||
> - 舞台切换系统（路由器）负责在观众不注意的时候换布景（无刷新切换）
|
||||
|
||||
<RouterArchitectureDemo />
|
||||
|
||||
### 1.3 路由模式：Hash vs History
|
||||
|
||||
前端路由的实现主要有两种模式，它们在URL表现形式和底层实现上有本质区别。
|
||||
|
||||
| 特性 | Hash 模式 | History 模式 |
|
||||
|------|-----------|--------------|
|
||||
| URL 示例 | `/#/user/123` | `/user/123` |
|
||||
| 实现原理 | 监听 `hashchange` 事件 | 使用 History API |
|
||||
| 服务端配置 | 不需要 | 需要配置 fallback |
|
||||
| 浏览器兼容性 | IE8+ | IE10+ |
|
||||
| SEO 友好度 | 较差 | 良好 |
|
||||
|
||||
<HashVsHistoryDemo />
|
||||
|
||||
---
|
||||
|
||||
## 2. 案例分析：某SaaS平台的路由演进
|
||||
|
||||
### 2.1 初期：简单的扁平路由
|
||||
|
||||
2019年，"云管家"SaaS平台刚上线时，只有简单的几个页面：
|
||||
|
||||
```javascript
|
||||
// router.js - 第一版
|
||||
const routes = [
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/dashboard', component: Dashboard },
|
||||
{ path: '/settings', component: Settings },
|
||||
{ path: '/profile', component: Profile }
|
||||
]
|
||||
```
|
||||
|
||||
**问题出现**：随着功能增加，路由文件迅速膨胀到200+行，维护困难。
|
||||
|
||||
### 2.2 发展期：按模块拆分
|
||||
|
||||
2020年，团队决定将路由按业务模块拆分：
|
||||
|
||||
```javascript
|
||||
// router/index.js
|
||||
import dashboardRoutes from './modules/dashboard'
|
||||
import userRoutes from './modules/user'
|
||||
import projectRoutes from './modules/project'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Home },
|
||||
...dashboardRoutes,
|
||||
...userRoutes,
|
||||
...projectRoutes,
|
||||
{ path: '/:path(.*)*', component: NotFound }
|
||||
]
|
||||
```
|
||||
|
||||
```javascript
|
||||
// router/modules/project.js
|
||||
export default [
|
||||
{
|
||||
path: '/projects',
|
||||
component: ProjectList,
|
||||
meta: { title: '项目列表', requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/projects/:id',
|
||||
component: ProjectDetail,
|
||||
meta: { title: '项目详情' },
|
||||
children: [
|
||||
{ path: '', component: ProjectOverview },
|
||||
{ path: 'tasks', component: ProjectTasks },
|
||||
{ path: 'members', component: ProjectMembers }
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**好处**：每个模块独立维护，新增功能只需修改对应模块。
|
||||
|
||||
### 2.3 成熟期：动态权限路由
|
||||
|
||||
2021年，平台引入RBAC权限系统，需要根据不同用户角色动态生成路由：
|
||||
|
||||
```javascript
|
||||
// 后端返回的菜单/路由配置
|
||||
const serverRouteConfig = [
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'Admin',
|
||||
component: 'Layout',
|
||||
meta: { icon: 'setting', roles: ['admin', 'super_admin'] },
|
||||
children: [
|
||||
{ path: 'users', component: 'UserManagement', meta: { title: '用户管理' } },
|
||||
{ path: 'roles', component: 'RoleManagement', meta: { title: '角色管理' } }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/finance',
|
||||
name: 'Finance',
|
||||
component: 'Layout',
|
||||
meta: { icon: 'money', roles: ['finance', 'admin'] },
|
||||
children: [
|
||||
{ path: 'invoices', component: 'InvoiceList', meta: { title: '发票管理' } },
|
||||
{ path: 'reports', component: 'FinanceReport', meta: { title: '财务报表' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 路由生成器
|
||||
function generateRoutes(config, userRoles) {
|
||||
return config
|
||||
.filter(route => {
|
||||
// 检查用户是否有权限访问该路由
|
||||
const requiredRoles = route.meta?.roles || []
|
||||
return requiredRoles.some(role => userRoles.includes(role))
|
||||
})
|
||||
.map(route => ({
|
||||
...route,
|
||||
component: () => import(`@/views/${route.component}.vue`),
|
||||
children: route.children ? generateRoutes(route.children, userRoles) : undefined
|
||||
}))
|
||||
}
|
||||
|
||||
// 在路由守卫中动态添加
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const userStore = useUserStore()
|
||||
|
||||
if (!userStore.hasGeneratedRoutes) {
|
||||
const userRoles = userStore.roles
|
||||
const accessRoutes = generateRoutes(serverRouteConfig, userRoles)
|
||||
|
||||
accessRoutes.forEach(route => router.addRoute(route))
|
||||
userStore.hasGeneratedRoutes = true
|
||||
|
||||
// 重新导航到目标路由
|
||||
next({ ...to, replace: true })
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**演进总结**：
|
||||
|
||||
| 阶段 | 特点 | 解决问题 |
|
||||
|------|------|----------|
|
||||
| 初期 | 扁平路由 | 快速上线 |
|
||||
| 发展期 | 模块拆分 | 维护性 |
|
||||
| 成熟期 | 动态权限 | 安全性 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 原理深入：路由工作原理
|
||||
|
||||
### 3.1 Hash 模式的实现原理
|
||||
|
||||
Hash 模式的核心是利用 URL 中的 `hash` 部分（即 `#` 后面的内容）。hash 的变化不会触发页面刷新，但会产生历史记录。
|
||||
|
||||
**工作流程**：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Hash 模式工作流程 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. 初始状态 │
|
||||
│ URL: https://example.com/#/home │
|
||||
│ 当前 hash: #/home │
|
||||
│ │
|
||||
│ 2. 用户点击导航链接 │
|
||||
│ 链接: <a href="#/user/123">用户中心</a> │
|
||||
│ │
|
||||
│ 3. hashchange 事件触发 │
|
||||
│ 浏览器自动更新 URL: │
|
||||
│ https://example.com/#/user/123 │
|
||||
│ │
|
||||
│ 4. 路由处理器执行 │
|
||||
│ ┌─────────────────────┐ │
|
||||
│ │ 1. 解析 hash 值 │ │
|
||||
│ │ → 提取 /user/123 │ │
|
||||
│ │ │ │
|
||||
│ │ 2. 匹配路由配置 │ │
|
||||
│ │ → 匹配 /user/:id │ │
|
||||
│ │ │ │
|
||||
│ │ 3. 提取参数 │ │
|
||||
│ │ → { id: "123" } │ │
|
||||
│ │ │ │
|
||||
│ │ 4. 渲染组件 │ │
|
||||
│ │ → UserDetail.vue │ │
|
||||
│ └─────────────────────┘ │
|
||||
│ │
|
||||
│ 5. 浏览器历史栈 │
|
||||
│ history: ["/home", "/user/123"] │
|
||||
│ 用户可点击后退按钮回到 /home │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**核心代码实现**：
|
||||
|
||||
```javascript
|
||||
class HashRouter {
|
||||
constructor(routes) {
|
||||
this.routes = routes
|
||||
this.currentPath = ''
|
||||
|
||||
// 初始化时解析当前 hash
|
||||
this.parseHash()
|
||||
|
||||
// 监听 hashchange 事件
|
||||
window.addEventListener('hashchange', () => {
|
||||
this.parseHash()
|
||||
})
|
||||
}
|
||||
|
||||
parseHash() {
|
||||
// 获取 hash，去掉开头的 #
|
||||
const hash = window.location.hash.slice(1) || '/'
|
||||
this.navigate(hash)
|
||||
}
|
||||
|
||||
navigate(path) {
|
||||
this.currentPath = path
|
||||
const route = this.matchRoute(path)
|
||||
|
||||
if (route) {
|
||||
this.render(route.component, route.params)
|
||||
} else {
|
||||
this.render(NotFoundComponent)
|
||||
}
|
||||
}
|
||||
|
||||
matchRoute(path) {
|
||||
for (const route of this.routes) {
|
||||
const match = this.parseRoute(route.path, path)
|
||||
if (match) {
|
||||
return { ...route, params: match.params }
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
parseRoute(routePath, actualPath) {
|
||||
// 将 /user/:id 转换为正则表达式
|
||||
const paramNames = []
|
||||
const regexPath = routePath.replace(/:([^/]+)/g, (match, name) => {
|
||||
paramNames.push(name)
|
||||
return '([^/]+)'
|
||||
})
|
||||
|
||||
const regex = new RegExp(`^${regexPath}$`)
|
||||
const match = actualPath.match(regex)
|
||||
|
||||
if (!match) return null
|
||||
|
||||
// 提取参数
|
||||
const params = {}
|
||||
paramNames.forEach((name, index) => {
|
||||
params[name] = match[index + 1]
|
||||
})
|
||||
|
||||
return { params }
|
||||
}
|
||||
|
||||
render(component, params = {}) {
|
||||
// 实际的DOM渲染逻辑
|
||||
const app = document.getElementById('app')
|
||||
app.innerHTML = ''
|
||||
const instance = new component({ params })
|
||||
app.appendChild(instance.mount())
|
||||
}
|
||||
|
||||
push(path) {
|
||||
window.location.hash = path
|
||||
}
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
const router = new HashRouter([
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/user', component: UserList },
|
||||
{ path: '/user/:id', component: UserDetail },
|
||||
{ path: '/products/:category/:id', component: ProductDetail }
|
||||
])
|
||||
|
||||
// 编程式导航
|
||||
router.push('/user/123')
|
||||
```
|
||||
|
||||
### 3.2 History 模式的实现原理
|
||||
|
||||
History 模式利用 HTML5 History API（主要是 `pushState` 和 `replaceState`）来实现 URL 的改变，同时不会触发页面刷新。
|
||||
|
||||
**与 Hash 模式的核心区别**：
|
||||
|
||||
| 特性 | Hash 模式 | History 模式 |
|
||||
|------|-----------|--------------|
|
||||
| URL 变化 | 修改 `#` 部分 | 修改完整路径 |
|
||||
| 浏览器事件 | `hashchange` | `popstate` |
|
||||
| 服务端感知 | 不感知 hash | 会收到请求 |
|
||||
| SEO | 较差 | 良好 |
|
||||
|
||||
**工作流程**：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ History 模式工作流程 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. 初始状态 │
|
||||
│ URL: https://example.com/home │
|
||||
│ 浏览器历史栈: ["/home"] │
|
||||
│ │
|
||||
│ 2. 用户点击导航链接 │
|
||||
│ 链接: <a href="/user/123" data-nav>用户中心</a> │
|
||||
│ │
|
||||
│ 3. 拦截导航行为 │
|
||||
│ ┌──────────────────────────┐ │
|
||||
│ │ 阻止默认行为 │ │
|
||||
│ │ event.preventDefault() │ │
|
||||
│ └──────────────────────────┘ │
|
||||
│ │
|
||||
│ 4. 调用 History API │
|
||||
│ ┌────────────────────────────┐ │
|
||||
│ │ history.pushState( │ │
|
||||
│ │ { userId: 123 }, │ // state 数据 │
|
||||
│ │ "用户中心", │ // 页面标题 │
|
||||
│ │ "/user/123" │ // 新 URL │
|
||||
│ │ ) │ │
|
||||
│ └────────────────────────────┘ │
|
||||
│ │
|
||||
│ URL 更新为: https://example.com/user/123 │
|
||||
│ ⚠️ 注意：此时页面不会刷新！ │
|
||||
│ │
|
||||
│ 5. 路由匹配与渲染 │
|
||||
│ ┌─────────────────────────┐ │
|
||||
│ │ 1. 解析路径 /user/123 │ │
|
||||
│ │ │ │
|
||||
│ │ 2. 匹配路由配置 │ │
|
||||
│ │ /user/:id │ │
|
||||
│ │ │ │
|
||||
│ │ 3. 提取参数 │ │
|
||||
│ │ { id: "123" } │ │
|
||||
│ │ │ │
|
||||
│ │ 4. 渲染组件 │ │
|
||||
│ │ UserDetail.vue │ │
|
||||
│ │ │ │
|
||||
│ │ 5. 更新页面标题 │ │
|
||||
│ │ document.title │ │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
│ 6. 浏览器历史栈 │
|
||||
│ history: ["/home", "/user/123"] │
|
||||
│ │
|
||||
│ 用户可以： │
|
||||
│ - 点击后退 → 回到 /home │
|
||||
│ - 点击前进 → 回到 /user/123 │
|
||||
│ - 直接修改URL访问 │
|
||||
│ │
|
||||
│ 7. 处理浏览器前进/后退 │
|
||||
│ ┌────────────────────────────────┐ │
|
||||
│ │ window.addEventListener( │ │
|
||||
│ │ 'popstate', │ │
|
||||
│ │ (event) => { │ │
|
||||
│ │ // 获取 state 数据 │ │
|
||||
│ │ const state = event.state │ │
|
||||
│ │ │ │
|
||||
│ │ // 根据当前 URL 重新渲染 │ │
|
||||
│ │ const path = location.pathname │ │
|
||||
│ │ router.match(path) │ │
|
||||
│ │ } │ │
|
||||
│ │ ) │ │
|
||||
│ └────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**服务端配置的关键作用**：
|
||||
|
||||
History 模式的最大陷阱在于**服务端配置**。当用户直接访问 `https://example.com/user/123` 或刷新页面时，浏览器会向服务端发送请求。
|
||||
|
||||
```
|
||||
用户直接访问 /user/123
|
||||
↓
|
||||
浏览器发送 GET /user/123 到服务器
|
||||
↓
|
||||
服务器查找 /user/123 对应的文件
|
||||
↓
|
||||
❌ 找不到！返回 404
|
||||
```
|
||||
|
||||
**正确的服务端配置**（以 Nginx 为例）：
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name example.com;
|
||||
root /var/www/app;
|
||||
index index.html;
|
||||
|
||||
# 关键配置：所有路由都指向 index.html
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
用户直接访问 /user/123
|
||||
↓
|
||||
浏览器发送 GET /user/123 到服务器
|
||||
↓
|
||||
Nginx 尝试查找 /user/123 文件 → 不存在
|
||||
↓
|
||||
Nginx 回退到 /index.html
|
||||
↓
|
||||
浏览器加载 SPA，前端路由接管
|
||||
↓
|
||||
前端路由解析 /user/123 → 渲染 UserDetail 组件
|
||||
↓
|
||||
✅ 页面正常显示！
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 总结与学习建议
|
||||
|
||||
前端路由是现代单页应用的核心技术之一。从早期的 Hash 模式到现在主流的 History 模式，路由技术在不断进化，为用户提供更流畅的浏览体验。
|
||||
|
||||
### 核心要点回顾
|
||||
|
||||
1. **理解两种路由模式的本质区别**：Hash 模式利用 URL hash 特性，History 模式利用 HTML5 History API
|
||||
2. **服务端配置至关重要**：使用 History 模式必须正确配置服务端 fallback 到 index.html
|
||||
3. **路由设计体现架构思维**：扁平化 vs 嵌套、静态 vs 动态，都反映了对业务的理解
|
||||
4. **权限路由要谨慎处理**：前后端都需要验证，不能依赖单一端做权限控制
|
||||
|
||||
### 学习路线图
|
||||
|
||||
```
|
||||
初级阶段
|
||||
├── 理解 SPA 与传统 MPA 的区别
|
||||
├── 掌握 Hash 和 History 模式的基本原理
|
||||
└── 能够使用 Vue Router / React Router 完成基础配置
|
||||
|
||||
进阶阶段
|
||||
├── 深入理解 History API 的底层实现
|
||||
├── 能够手写一个简单的前端路由库
|
||||
├── 掌握路由守卫、懒加载、滚动行为等高级特性
|
||||
└── 理解服务端配置原理，能够独立部署 SPA
|
||||
|
||||
高级阶段
|
||||
├── 设计复杂的路由架构（微前端、嵌套路由等）
|
||||
├── 实现基于权限的动态路由系统
|
||||
├── 路由性能优化（预加载、按需加载策略）
|
||||
└── 多端路由方案设计（Web、小程序、App 统一路由）
|
||||
```
|
||||
|
||||
### 实践建议
|
||||
|
||||
1. **动手实现一个迷你路由库**：不依赖框架，用原生 JS 实现 Hash 和 History 两种模式，这是理解原理的最佳方式。
|
||||
|
||||
2. **阅读源码**：Vue Router 和 React Router 的源码都相对易读，从中可以学到很多工程化实践经验。
|
||||
|
||||
3. **关注真实项目中的路由设计**：分析知名开源项目（如 GitLab、Jira、各种 Admin 系统）的路由结构，学习它们的组织方式。
|
||||
|
||||
4. **解决实际问题**：尝试在你的项目中实现以下功能：
|
||||
- 面包屑导航自动生成
|
||||
- 页面切换动画
|
||||
- 路由级权限控制
|
||||
- 页面标题和 meta 信息动态更新
|
||||
|
||||
记住：**路由不只是"页面跳转"，它反映了整个应用的信息架构**。一个好的路由设计，能让用户更容易理解你的产品，也能让代码更易维护。
|
||||
|
||||
---
|
||||
|
||||
## 5. 名词速查表 (Glossary)
|
||||
|
||||
| 名词 | 英文全称 | 解释 |
|
||||
| :--- | :--- | :--- |
|
||||
| **SPA** | Single Page Application | **单页应用**。整个应用只有一个 HTML 页面，通过动态更新 DOM 实现页面切换，无需整页刷新。 |
|
||||
| **MPA** | Multi-Page Application | **多页应用**。每个页面对应独立的 HTML 文件，页面跳转会触发完整的浏览器刷新。 |
|
||||
| **Router** | - | **路由器/路由库**。负责管理 URL 与页面组件的映射关系，处理导航逻辑的库或模块。 |
|
||||
| **Route** | - | **路由**。URL 路径与组件的映射配置，定义了访问某个路径时应该渲染什么内容。 |
|
||||
| **Hash Mode** | - | **Hash 模式**。前端路由的一种实现方式，利用 URL 中的 hash（#）部分，不会触发页面刷新。 |
|
||||
| **History Mode** | - | **History 模式**。前端路由的一种实现方式，利用 HTML5 History API，URL 更美观但需要服务端配合。 |
|
||||
| **History API** | HTML5 History API | **历史记录 API**。浏览器提供的接口，允许在不刷新页面的情况下操作浏览器历史记录。 |
|
||||
| **pushState** | - | **压入状态**。History API 的方法，将指定状态添加到历史记录栈，改变 URL 但不刷新页面。 |
|
||||
| **replaceState** | - | **替换状态**。History API 的方法，修改当前历史记录条目，不会创建新记录。 |
|
||||
| **popstate** | - | **历史变化事件**。当用户点击前进/后退按钮或调用 history.back/forward 时触发的事件。 |
|
||||
| **hashchange** | - | **Hash 变化事件**。当 URL 中的 hash 部分发生变化时触发的事件。 |
|
||||
| **Nested Route** | - | **嵌套路由**。在一个路由内定义子路由，形成层级结构，对应页面的嵌套布局。 |
|
||||
| **Dynamic Route** | - | **动态路由**。包含参数的路由，如 `/user/:id`，可以匹配多个具体的 URL。 |
|
||||
| **Route Parameter** | - | **路由参数**。URL 中的动态部分，如 `:id`、`:name`，可以在组件中获取使用。 |
|
||||
| **Wildcard Route** | - | **通配符路由**。匹配任意路径的路由，通常用于 404 页面，如 `*` 或 `(.*)*`。 |
|
||||
| **Lazy Loading** | - | **懒加载/按需加载**。只在需要时才加载路由对应的组件，减少首屏加载时间。 |
|
||||
| **Route Guard** | - | **路由守卫**。在路由跳转前后执行的钩子函数，用于权限验证、日志记录等。 |
|
||||
| **Navigation** | - | **导航**。在应用中切换页面的行为，可以通过链接点击或编程方式触发。 |
|
||||
| **Programmatic Navigation** | - | **编程式导航**。通过代码而非点击链接来触发路由跳转，如 `router.push()`。 |
|
||||
| **Fallback** | - | **回退/兜底**。当请求的资源不存在时返回的默认内容，如 SPA 的 `index.html` 回退。 |
|
||||
| **SEO** | Search Engine Optimization | **搜索引擎优化**。提升网站在搜索引擎中排名的技术和方法。 |
|
||||
| **SSR** | Server-Side Rendering | **服务端渲染**。在服务器端生成 HTML 内容，有利于 SEO 和首屏加载。 |
|
||||
| **TTFB** | Time To First Byte | **首字节时间**。从发起请求到接收到服务器第一个字节的时间。 |
|
||||
| **Breadcrumb** | - | **面包屑导航**。显示当前页面在网站层级结构中位置的导航元素。 |
|
||||
| **Active Link** | - | **激活链接**。当前匹配路由的导航链接，通常有特殊样式标识。 |
|
||||
<|tool_calls_section_begin|><|tool_call_begin|>functions.Write:16<|tool_call_argument_begin|>{
|
||||
Reference in New Issue
Block a user