html路由本身不优化应用，关键在url是否干净、历史跳转是否可靠、刷新/直链是否不崩；需服务端fallback支持pushstate，hash模式零配置但不利seo；首次加载须手动初始化路由；参数解析推荐urlpattern及校验；预渲染是spa上线必选项。
HTML 路由本身不“优化”应用，它只是控制视图切换的机制；真正影响性能、SEO 和用户体验的是你用什么方式实现路由、怎么处理 URL 变化、以及服务端是否配合。别迷信 pushState 或框架路由插件，关键在三点：URL 是否干净、历史跳转是否可靠、刷新/直链是否不崩。
用 history.pushState 还是 location.hash？看部署和兼容性需求
两者都能避免整页刷新，但行为差异直接影响部署和用户行为：
-
pushState生成干净 URL（如/about），但要求服务端对所有非静态资源路径返回index.html，否则刷新直接 404；Netlify/Vercel 可配netlify.toml或_redirects，Nginx 需加try_files $uri $uri/ /index.html; -
location.hash兼容 IE9+，URL 带#（如#/about），刷新安全，服务端零配置，但不利于 SEO 且部分爬虫仍会忽略 - 若用
pushState却没配服务端 fallback，用户分享链接或手动刷新时，服务器返回 404，前端根本没机会执行 JS —— 这是最常被忽略的崩点
监听 popstate 事件前必须手动触发一次初始化
浏览器前进/后退会触发 popstate，但页面首次加载时不会——哪怕 URL 已含路径，popstate 也不会自动调用。不补这一手，用户从外链点进 /contact，看到的仍是首页。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查
window.location.pathname（pushState模式）或window.location.hash（hash 模式） - 手动调用一次渲染逻辑，例如
renderPage(getCurrentPath()) - 再绑定
window.addEventListener('popstate', () => renderPage(getCurrentPath())) - 注意：
popstate的event.state在直接访问或刷新时为null，不能依赖它传参，得从 URL 解析
参数化路由（如 /user/123）别硬写正则匹配
手写 pathname.match(/^\/user\/(\d+)$/) 看似简单，实际容易漏边界：带查询参数（?tab=profile）、斜杠结尾（/user/123/）、编码字符（/user/%E4%BD%A0%E5%A5%BD）都会让匹配失败。
- 优先用浏览器原生
URLPattern（Chrome 110+、Edge 110+ 支持）：new URLPattern({ pathname: '/user/:id' }) - 旧浏览器必须降级，推荐轻量 polyfill：
urlpattern-polyfill，比自己维护正则更稳 - 提取参数后，务必做类型校验：
id是字符串，不是数字，parseInt(id, 10)前先id && /^\d+$/.test(id) - 别把参数直接拼进 HTML 或 innerHTML，防 XSS；用
textContent或模板引擎的安全渲染
预渲染不是可选项，是单页应用上线前必做的兜底动作
纯客户端渲染的 SPA，初始 HTML 几乎为空，爬虫抓不到内容，弱网用户等 JS 加载完才见字——这不是体验问题，是功能缺失。
- 构建时生成静态 HTML（如 Vue 的
prerender-spa-plugin、Vite 的vite-plugin-prerender），每个路由对应一个.html文件 - 预渲染只覆盖“已知路径”，动态 ID 路由（如
/post/123）需提前配置白名单或用服务端渲染兜底 - 注意：预渲染内容是快照，如果页面依赖用户登录态或实时 API，得在 JS 启动后二次拉取并更新 DOM，否则数据过期
最易被忽略的其实是 URL 解析环节：同一路径，https://a.com/about 和 https://a.com/about/ 在某些服务端配置下可能被当成两个资源；前端路由若没统一 normalize 斜杠，就可能匹配失败。别假设 URL 总是你期望的样子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
