Laravel：点击按钮时如何正确替换地址栏URL

出现这种情况通常是因为按钮同时触发了两种跳转逻辑，或是跳转代码存在URL拼接错误，以下是具体排查和解决方法：

1. 检查按钮的HTML结构，避免多重跳转绑定 #

• 不要嵌套跳转标签：比如禁止将<button>放在<a>标签内部，也不要给<a>标签额外绑定onclick跳转事件，保留单一跳转逻辑即可：
  • 用纯<a>标签实现跳转：

    <a href="目标页面完整URL">跳转按钮</a>
    

  • 用<button>配合JS实现跳转：

    <button onclick="jumpToPage()">跳转按钮</button>
    <script>
    function jumpToPage() {
      window.location.href = "目标页面完整URL";
    }
    </script>
    

2. 修正JS跳转代码的URL错误 #

• 确保跳转代码直接赋值正确的目标URL，避免错误拼接当前页面URL：

  // 错误示例：误将当前URL和目标URL拼接
  window.location.href = window.location.href + "目标页面URL";
  
  // 正确写法：直接赋值目标URL
  window.location.href = "https://your-domain.com/target-page";
  

3. 处理表单提交与跳转冲突的情况 #

如果按钮是表单的提交按钮，同时绑定了跳转事件，会导致表单提交和页面跳转同时触发：

• 若不需要表单提交，直接移除表单结构；若需要保留表单，阻止默认提交行为：

  <form id="targetForm">
    <button onclick="jumpToPage(event)">跳转按钮</button>
  </form>
  <script>
  function jumpToPage(event) {
    event.preventDefault(); // 阻止表单默认提交动作
    window.location.href = "目标页面完整URL";
  }
  </script>
  

内容的提问来源于stack exchange，提问作者kaliboba