分页HTML模板必须用nav+ol，禁用div/ul；当前页用aria-current="page"且无href，其他页用带href的a标签；nav需设aria-label="页码导航"，禁用状态移除href并加aria-disabled="true"。
分页 HTML 模板必须用 nav + ol，不能用 div 或 ul
语义错误是分页组件最隐蔽的坑——屏幕阅读器、SEO 和键盘导航全靠结构撑着。nav 告诉辅助技术“这是独立导航区”，ol 表明页码有明确顺序（1→2→3…），而 ul 是无序列表，div 则完全丢失语义。
当前页必须用 aria-current="page" 标记，且该 li 不能带 href；其他页码一律用带 href 的 a 标签，不是 button。否则键盘用户按空格/回车无效，刷新后状态丢失，浏览器前进后退也失效。
-
nav必须带aria-label="页码导航"，不可省略 - 禁用状态（如首页点“上一页”）应移除
href并加aria-disabled="true"，而非仅靠 CSS 灰掉 - 不要在模板里硬写死页码数字，所有页码都应由 JS 动态生成并注入，避免服务端渲染与客户端状态错位
页码数组生成函数 getPageNumbers() 要处理边界和省略逻辑
直接循环 for (let i = 1; i 渲染全部页码，在总页数超 50 时会撑爆 DOM、卡顿、可访问性崩溃。真实场景下必须做“可见段截断”。
getPageNumbers(currentPage, totalPages, maxVisible = 5) 这个函数的核心不是显示多少个数字，而是确保：当前页始终居中、首尾页必显、中间用 ''（字符串）占位表示省略号、边界不越界。
- 当
currentPage靠近开头（如第 2 页，总页数 100），要强制拉齐显示范围为[1, '', 2, 3, 4, 5, '', 100]，而不是[1, 2, 3, 4, 5]—— 否则用户找不到“跳到最后”入口 - 返回数组含混合类型（数字 + 字符串），渲染时需判断：
typeof item === 'number'才生成a标签，item === ''则生成li class="ellipsis" - 别忘了
totalPages === 0时要设为1，否则空数据下整个分页栏消失
URL 构造必须用 URLSearchParams，别拼字符串
手动拼 ?page= + p + &size= + s 是线上事故高发区：中文参数没编码、已有查询参数时多出第二个 ?、特殊字符（如 #）截断 URL、旧参数被覆盖。
正确做法是复用当前 URL，并只更新分页相关参数：
function buildPageUrl(targetPage, config = {}) {
const { pageKey = 'page', sizeKey = 'size', pageSize = 10 } = config;
const url = new URL(window.location.href);
url.searchParams.set(pageKey, targetPage);
url.searchParams.set(sizeKey, pageSize);
return url.toString();
}
- 调用
buildPageUrl(3, { pageKey: 'pageNum' })会自动保留原有路径和参数，生成类似/list?category=tech&pageNum=3&size=10 - 点击页码后必须同步调用
history.pushState()，否则刷新回到第 1 页；但注意不要重复 push 相同 URL，否则历史栈爆炸 - 服务端接口字段名（如
pageNumvspage）应由 config 统一控制，前端模板不硬编码键名
模板注入必须避开 innerHTML，尤其含用户数据时
用 container.innerHTML = htmlString 拼接页码，一旦后端返回的页码文本含 <script></script> 或 onerror，就等于主动开 XSS 入口。哪怕只是数字，也建议统一走安全路径。
推荐用 document.createElement + textContent 组合，或用 template 标签预置结构：
<template id="pagination-item"><li><a href=""></a></li> </template>
- 每次生成页码项时克隆 template，设
link.href = buildPageUrl(i)，再用link.textContent = i—— 完全规避 HTML 注入风险 - 当前页项不用
a，改用span并设aria-current="page"，避免误跳转 - 上/下一页按钮也必须是
a，禁用时移除href+aria-disabled="true"，别用button模拟
实际最难缠的不是生成页码，而是让页码状态和 URL、history、服务端返回的 total 三者始终对齐——任何一方滞后或错位，都会导致“点了第 5 页但显示第 3 页数据”这类问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
