单页应用如何在隐藏部分路由的同时保证搜索引擎可抓取，兼顾体验与收录，避免因前端渲染造成内容不可见。
一、体验与收录的冲突
前端路由让页面切换更顺滑，但搜索引擎爬虫对纯客户端渲染的容忍度有限。如果所有隐藏路线都依赖 JavaScript 生成，收录效果往往不理想。
二、预渲染与静态化
对内容相对稳定的教程与资讯页面，推荐在构建阶段生成静态 HTML，再交给前端路由接管。这样爬虫拿到的是完整内容，用户获得的是单页体验。
TypeScript
// 构建阶段为每条公开路由生成静态入口
export const prerenderRoutes = tutorials
.filter(t => !t.hidden)
.map(t => `/detail/${t.id}`);三、规范链接与 canonical
同一内容若存在多个隐藏入口，应通过 canonical 指向唯一的规范地址，避免权重分散。隐藏入口建议设置为不可索引，并加入站点地图的统一规则。
四、策略小结
公开内容走静态化，隐藏线路走动态拦截，是当前最平衡的做法。既能保证收录，又不牺牲交互体验。
以上内容为技术原理与实现思路的讲解，示例代码仅用于说明，请结合自身项目环境调整后使用。