应使用标签加css样式实现跳转，因其语义正确、无需js、seo友好、无障碍支持完善；+onclick跳转存在js失效、右键功能缺失、spa硬刷、seo弱、屏幕阅读器误读等多重问题。

直接用 @#@#@#@#@#@#@#@#@#@0

CSS 样式可复用：.btn { display: inline-block; padding: 8px 16px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; }

如需禁用状态，加 aria-disabled="true" 和 CSS 控制样式，比操作 <button></button> 的 disabled 属性更可控

带参数跳转？直接拼 URL：@#@#@#@#@#@#@#@#@#@1，不用 form 或 JS 构造

必须用 <button></button> 的场景：如何安全跳转

仅当按钮行为不只是跳转——比如要先校验登录态、弹确认框、上报埋点、或和表单状态联动时，才该用 <button></button>。

• 必须用 addEventListener，别写内联 onclick：便于复用、测试、解耦
• 跳转前务必调用 e.preventDefault()，尤其在 <form></form> 内，否则会触发默认提交
• SPA 中禁止用 window.location.href，改用对应框架的路由方法：router.push()（Vue）、useNavigate()（React）、$navigate()（SvelteKit）
• SSR 环境下，跳转前加客户端判断：if (typeof window !== 'undefined') { router.push('/path'); }

动态生成按钮时最容易漏掉的一件事

批量渲染按钮列表时，开发者常只关注 URL 拼接，却忽略目标链接的可访问性与安全性：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• URL 必须经过 encodeURI() 处理，尤其是含中文或特殊字符的路径
• 用户可控的跳转地址（如后台配置项）必须白名单校验，防止 open redirect 漏洞
• 不要用 eval() 或字符串拼接函数名（如 clickTag1）绑定事件，应统一用 data 属性存 URL：<button data-href="/user/123">查看</button>，再在 JS 中读取
• 每个按钮都应有明确的 role="link" 或包裹在 <a></a> 中，否则屏幕阅读器无法识别其导航意图

真正“无缝”的跳转，不在于动画或加载速度，而在于是否尊重 HTML 语义、用户控制权和运行环境约束。多数所谓“技巧”，其实是把简单问题复杂化了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！