单页应用靠路由组织页面。Claude Code 能帮你配置路由、嵌套路由、守卫和懒加载，下面就分享Claude Code怎么配置前端路由的详细方法。
前端路由要处理什么?
- 路径与页面映射
- 嵌套 / 动态路由
- 路由传参
- 导航守卫(登录鉴权)
- 路由懒加载
用法一:配置基础路由
「帮我配置路由:首页、列表页、详情页,详情页带 id 参数。」
用法二:嵌套路由
「实现带侧边栏的后台布局,内容区根据子路由切换。」
用法三:导航守卫
「加一个登录守卫:未登录访问受保护页面时跳转到登录页。」
用法四:路由懒加载
「把路由组件改成懒加载,减小首屏体积。」
用法五:处理传参与查询
「实现列表筛选条件同步到 URL 查询参数,刷新后保持。」
路由配置实践建议
- 结构清晰:路由表集中管理。
- 懒加载:按路由分包,优化首屏。
- 守卫鉴权:受保护页面统一守卫。
- 404 处理:配置兜底页面。
- 状态进 URL:筛选 / 分页可同步到 URL,利于分享。
小结
把前端路由配置交给 Claude Code,基础路由、嵌套、守卫、懒加载都能搞定。结构清晰、懒加载、守卫鉴权、状态进 URL,单页应用更专业。