直接用 location.reload() 可实现页面刷新，内联或 addeventlistener 绑定均可，但需注意缓存行为、表单默认提交干扰、url 参数保留限制、跨域 iframe 权限问题及 safari 自动调用限制。
直接用 location.reload() 最简单
页面刷新不需要引入任何库，浏览器原生就支持。给按钮绑定点击事件，调用 location.reload() 即可触发整页重载。
常见写法是内联 onclick 或用 addEventListener。内联方式适合快速验证，但实际项目中建议分离 JS 逻辑：
<button onclick="location.reload()">刷新页面</button>
或者更规范地：
<button id="refreshBtn">刷新页面</button>
<script>
document.getElementById('refreshBtn').addEventListener('click', () => {
location.reload();
});
</script>
注意：location.reload() 默认从浏览器缓存加载（等价于传 false），加参数 true 才强制从服务器重新获取（可能变慢，且部分浏览器已忽略该参数）。
避免重复提交时别用 form + submit
如果按钮包在 <form></form> 里，又没阻止默认行为，点按钮会先触发表单提交，可能导致跳转或重复请求，而不是单纯刷新。
这种情况要明确禁止表单默认行为：
关键点：type="button" —— 不然默认是 submit；或者保留 type="submit"，但在 JS 中调用 event.preventDefault()。
漏掉这点，可能看到页面闪一下又回到原样，甚至提交空表单。
需要带参数刷新？用 location.href 替代
location.reload() 不改变当前 URL，也就不会保留 query 参数变化。比如你想“刷新并重置搜索条件”，就得手动拼 URL：
例如清空 ?q=test：
<button onclick="location.href=location.origin + location.pathname">干净刷新</button>
或者动态处理：
const url = new URL(location.href);
url.searchParams.delete('q');
location.href = url.toString();
这种写法本质是跳转到新地址，浏览器会走完整加载流程（包括触发 beforeunload），而 reload() 不会触发该事件。
移动端和 iframe 场景下要小心权限限制
在某些 WebView（如微信内置浏览器、部分安卓 App 内嵌页）中，location.reload() 可能被拦截或静默失败，尤其当页面来自跨域 iframe 或设置了 sandbox 属性时。
如果点击无反应，先检查控制台是否报错：DOMException: Blocked a frame with origin ... from accessing a cross-origin frame。
此时只能由顶层页面主动刷新，子 iframe 无法越权操作；或者换成交互提示用户手动下拉刷新（依赖具体容器支持）。
另外，频繁自动调用 reload() 容易被浏览器判定为异常行为，Safari 某些版本会直接禁用该调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
