单击按钮导航到路由答案

【问题标题】：Navigate to route on button click单击按钮导航到路由
【发布时间】：2019-02-13 05:48:23
【问题描述】：

当我点击下面的按钮时，我想被重定向到href中指定的路由。但是它不起作用：

<button href="/auth"> Google+ </button>

我不确定这是否重要，但我正在运行节点应用程序。

如何在按钮点击时导航到路线？

【问题讨论】：

标签： javascript html node.js button routes

【解决方案1】：

按钮需要一个 onClick 处理程序。 href 属性用于链接（更具体地说是锚标记）。

<button onClick='someFunction'>Google</button>

<script>
    someFunction() {
        window.location = 'some-url';
    }
</script>

【讨论】：

不使用javascript就不行吗？
@RyanCameron 是的；请看我的回答。

【解决方案2】：

路由某些不同页面的最佳方法：我们有原生 javascript 方法 location.asign('这里是你的链接'); 例如

var btn = document.getElementById('btn');
btn.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click');
}

<button id="btn">
  click 
</button>

【讨论】：

【解决方案3】：

按钮最初不是为了重定向到新页面而设计的。相反，您正在寻找的是a 标签。然而，通过阅读 cmets，很明显您希望保留 button 元素并在不使用 JavaScript 的情况下添加相同的重定向功能，因此我将提供几个解决方案：

使用 JavaScript

var button = document.getElementById('myButton');
button.onclick = function() {
  location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/');
}

&lt;button id="myButton"&gt;Visit Website&lt;/button&gt;

没有 JavaScript

<form action="https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/">
    <input type="submit" value="Visit Website"/>
</form>

【讨论】：

【解决方案4】：

您可以改用a 元素：

<a href="/auth"> Google+ </a>

【讨论】：

【解决方案5】：

您可以使用以下解决方案通过单击按钮导航到路线：

<button onclick="clickFun()"> Google+ </button>
<script>
    clickFun() {
        window.location = '/auth';
    }
</script>

【讨论】：

如果是 POST 呢？

【解决方案6】：

很简单，你不能在按钮标签内使用链接，但你可以在按钮标签外添加标签

例如

<a href='www.google.com'><button>Click me</button></a>

休息取决于你的 css 技能

【讨论】：

【解决方案7】：

您可以将链接放在按钮内并赋予链接 href 属性，根据需要设置 href 类的样式

    <button class="button is-success" onclick={submit}>
      <a href="/auth" class="href">
        Save changes and Submit
      </a>
    </button>

【讨论】：

【解决方案8】：

您可以将按钮嵌套在锚标记内

<a href="/auth">
  <button> Google+ </button>
</a>

【讨论】：