html按钮点击不刷新跳转需用javascript调用history.pushstate修改url和历史栈，同时手动监听popstate事件更新视图，并配置服务端fallback返回index.html，否则刷新会404或视图不响应。
HTML按钮点击后不刷新页面跳转路由，用 history.pushState 最直接
纯 HTML 按钮本身没有路由能力，必须靠 JavaScript 主动干预。单页应用（SPA）里最底层、兼容性最好、不依赖框架的方式就是调用浏览器原生的 history.pushState。
常见错误是直接写 @#@#@#@#@#@#@#@#@#@0 或给 <button></button> 绑定 window.location.href = "/user" —— 这两种都会触发整页刷新，破坏 SPA 体验。
-
history.pushState只改 URL 和浏览器历史，不触发页面加载，适合手动管理路由状态 - 需同步更新页面内容（比如用
fetch加载新模板或切换 DOM），否则 URL 变了但视图没变 - 必须配合
window.addEventListener("popstate", ...)处理前进/后退按钮，否则返回时页面不会响应 - 注意：
pushState第二个参数（title）在现代浏览器中被忽略，传空字符串即可：history.pushState({}, "", "/user")
Vue/React 项目里别手写 history，优先用框架路由方法
框架自带的路由方案（如 Vue Router 的 router.push、React Router 的 useNavigate）已封装好状态同步、组件卸载/挂载、滚动复位等细节，手写容易漏。
典型错误是混用：比如在 Vue 组件里既调 router.push 又手动改 location.pathname，导致路由状态和视图不一致，甚至触发两次渲染。
- Vue 3 + Vue Router 4：在
setup中用const router = useRouter()，然后router.push("/user") - React 18 + React Router v6：用
const navigate = useNavigate()，然后navigate("/user") - 按钮上不要写
onclick="location.href=..."，这种内联 JS 无法触发框架的路由守卫（如权限校验） - 如果按钮需要异步判断（如登录态检查），务必 await 后再调路由方法，避免跳转后才弹提示
带参数的跳转，URL 编码和路径拼接最容易出错
跳转带查询参数（如 /search?q=前端&sort=date）或动态段（如 /user/123）时，手动拼字符串极易出错——中文乱码、特殊字符未转义、斜杠多/少一个，都可能让后端或路由匹配失败。
- 查询参数一律用
URLSearchParams构造：const params = new URLSearchParams({ q: "前端", sort: "date" }); history.pushState({}, "", `/search?${params}`) - 动态路径段用模板字符串没问题，但变量必须提前校验非空且合法：
if (id && /^\d+$/.test(id)) { router.push(`/user/${id}`) } - 避免直接拼接：
`/user/${userId}`中userId是null就变成/user/null，路由可能匹配不到 - React Router 的
navigate("/user/:id", { state: { user } })可传额外数据，比 query 更安全，但刷新后丢失，需权衡
服务端没配 history fallback，跳转后刷新就 404
开发时本地服务器（如 Vite、Webpack Dev Server）默认支持 history 模式，但部署到 Nginx/Apache 后，如果没配置 fallback，用户直接访问 /user 或刷新该页面，服务器会返回 404 —— 因为它只认真实存在的文件，而 /user 是前端路由，应由 index.html 响应并交由 JS 路由接管。
- Nginx 配置关键行：
location / { try_files $uri $uri/ /index.html; }，不是重定向，是内部 rewrite - Apache 需启用
mod_rewrite，根目录放.htaccess：RewriteRule ^(.*)$ /index.html [QSA,L] - Vercel/Netlify 等托管平台通常自动处理，但自定义域名或子路径部署时仍要检查
rewrites配置 - 这个坑只在真机访问或刷新时暴露，本地开发跑得好不代表上线没问题
路由跳转看着简单，但每层都有隐性依赖：JS 运行时、框架生命周期、服务端静态资源策略。漏掉任意一环，用户点一下按钮，要么白屏，要么跳错页，要么刷新就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
