JavaScript监听按钮点击事件后跳转至?logout地址的实现方法

实现方案 #

你可以根据是否需要刷新页面选择以下两种实现方式：

• 需要触发页面刷新/跳转（比如要触发后端登出逻辑）
  直接修改location.href属性即可，浏览器会自动基于当前页面的基础路径拼接参数并加载新地址：

  document.addEventListener("buttonClick", (e) => {   
    location.href = "?logout";
  });
  

• 仅修改地址栏URL、不触发页面刷新（纯前端修改路由状态）
  可以用HTML5提供的History API实现无感知更新地址：

  document.addEventListener("buttonClick", (e) => {   
    history.pushState(null, "", "?logout");
  });
  

注意：如果需要统一在站点根路径后追加?logout、忽略当前页面的子路径，可以把参数写成"/?logout"。

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