用最简跳转，但仅适用于静态页面；真实场景需JS发请求校验成功后再跳转，否则商品未加入或跳转失败。
点击按钮跳转到购物车页面，用
不需要 JavaScript 就能实现“加入购物车后跳转”，前提是跳转目标是静态页面（比如 /cart.html 或 /cart）。直接用带 href 的链接按钮最稳妥：
<a href="/cart" class="btn">加入购物车</a>
这样既语义正确，又天然支持右键新标签打开、SEO 友好，还避免了表单提交或 JS 未加载时的失效问题。如果设计上要求是 标签（比如为了统一 CSS 类），可以用 onclick="location.href='/cart'"，但要注意这会绕过浏览器前进/后退栈的正常记录（部分浏览器可能不触发 history push）。
需要先“加入”再跳转？必须用 JavaScript 模拟提交
真实场景中，“加入购物车”通常要发请求把商品 ID 发给后端，成功后再跳转。这时候不能只靠 HTML 跳转，否则商品根本没加进购物车。常见错误是写成：
<button onclick="location.href='/cart'">加入购物车</button>
这看起来跳了，但后端完全不知道你加了什么。正确做法是：
- 用
fetch或axios向/api/cart/add发 POST 请求，传入product_id等参数 - 检查响应状态（比如
response.ok或data.success === true） - 成功后再执行
location.href = '/cart'或history.pushState()
漏掉响应校验会导致用户以为加成功了，实际后端报错（如库存不足、登录失效），但页面已经跳走，错误无从提示。
target="_blank" 要谨慎，尤其涉及购物车操作
- 用户关掉新标签后，原商品页还在，容易重复点击，造成多次加购
- 新标签里购物车初始状态可能没同步最新数据（比如刚加的那件商品还没刷新出来）
- 移动端 Safari 对
target="_blank"有拦截策略，可能直接打不开
除非明确需求是“对比购物车”，否则一律走当前页跳转。
跳转前想加个加载态？CSS + JS 控制比改 HTML 更可靠
用户点击后显示“添加中…”再跳转，不能靠修改 的 href 属性（会立即导航）。必须用 JS 控制流程：
const btn = document.querySelector('.add-to-cart');<br>btn.addEventListener('click', async (e) => {<br> e.preventDefault();<br> btn.disabled = true;<br> btn.textContent = '添加中...';<br> try {<br> await fetch('/api/cart/add', { method: 'POST', body: JSON.stringify({ id: 123 }) });<br> location.href = '/cart';<br> } catch (err) {<br> alert('添加失败，请重试');<br> btn.disabled = false;<br> btn.textContent = '加入购物车';<br> }<br>});
关键点：必须调用 e.preventDefault() 阻止默认跳转，且禁用按钮防止重复提交。很多实现漏掉错误恢复逻辑，导致失败后按钮永远卡在“添加中…”状态。
跳转本身很简单，难的是“加购动作”和“跳转时机”的配合。后端没返回成功就跳，等于没加；加成功了但没跳，用户找不到购物车——这两头都得靠 JS 衔接清楚，HTML 单独搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
