用途
Frontend Routing 用于实现客户端路由（client-side routing），帮助开发者在单页应用（SPA）中构建具备导航、懒加载、受保护路由和状态管理的多页面应用。它面向需要多页面导航、基于 URL 的状态管理、受保护/守卫路由、组件懒加载以及查询参数处理的开发场景。
主要能力
该技能覆盖三大主流前端框架的路由方案：React Router、Vue Router 和 Angular Router。其能力包括：
- 导航（navigation）
- 懒加载（lazy loading）
- 受保护路由（protected routes）
- 基于 URL 的状态管理（state management）
- 查询参数处理（query parameter handling）
- 路由过渡效果（route transition effects）
使用方式
技能提供最小可运行示例，以 React Router v6 为例，展示如何组织应用路由。示例代码位于 App.tsx 中，导入 BrowserRouter、Routes、Route、Navigate 等组件，以及 Layout、Home、NotFound 页面和 useAuth 钩子。示例中使用 React.lazy 对 Dashboard、UserProfile、Settings 等页面进行懒加载，并定义 ProtectedRoute 包装组件：当 useAuth 返回的 isAuthenticated 为假时，通过 <Navigate to="/login" replace /> 重定向到登录页，否则渲染子组件。
完整实现请参见 references/ 目录下的参考指南，包含以下内容：
| 指南 | 内容 |
|---|---|
| React Router v6 | React Router v6 |
| Vue Router 4 | Vue Router 4 |
| Angular Routing | Angular Routing |
| Query Parameter Handling | 查询参数处理 |
| Route Transition Effects | 路由过渡效果 |
适用场景
- 多页面导航
- 基于 URL 的状态管理
- 受保护/守卫路由
- 组件懒加载
- 查询参数处理
最佳实践
建议（DO）：
- 遵循既有模式与约定
- 编写整洁、可维护的代码
- 添加适当的文档
- 部署前充分测试
避免（DON'T）：
- 跳过测试或验证
- 忽略错误处理
- 硬编码配置值
限制
资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围及实际效果等信息，暂未提供。