HTML点击按钮button跳转页面的几种实现方法

12 篇文章 6 订阅

其实我比较喜欢第一种方法

<button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button>

正文

方法一:在button标签中加上onclick属性,赋值为Javascript

<input type="button" onclick='location.href=("index.aspx")' />//在本页面打开
<input type="button" onclick='window.open("bedzhao.aspx")' />//打开新页面

<button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button>

方法二:触发一个函数跳转

<script>
    function jump(){
        window.location.href="http://blog.sina.com.cn/mleavs";
    }
</script>
<input type="button" value="我是一个按钮" οnclick=javascript:jump()>

方法三:a标签的超链接可以直接嵌套一个button

<a href="https://www.baidu.com/">
    <button>点我跳转到度娘!</button>
</a>

方法四:表单的action定向提交跳转

<form action="xx.html" method="post">
    <input type="button" value="按钮">
</form>

还有其他方法,有些方法一些浏览器可能会不支持。

结尾

我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!

如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞

参考

  • https://blog.csdn.net/tjh625/article/details/81235827
  • https://blog.csdn.net/weixin_44025103/article/details/90017593
  • 195
    点赞
  • 981
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
在2中,有几种方法可以实现点击跳转页面的功能。其中一种方法是使用<router-link>组件,通过设置to属性来指定跳转的目标路径或名称,并在组件内部包裹需要点击的元素。 例如,可以使用<router-link>组件来创建一个直接跳转的按钮,如下所示: <router-link to="/testDemo"> <button>点击跳转</button> </router-link> 还可以通过设置query参数或params参数来传递参数,如下所示: <router-link :to="{path: '/testDemo', query: {setid: 123456}}"> <button>点击跳转</button> </router-link> <router-link :to="{name: 'testDemo', params: {setid: 111222}}"> <button>点击跳转</button> </router-link> 另一种方法是使用this.$router.push()方法在Vue组件的方法实现页面跳转。可以在点击事件的处理函数中调用this.$router.push()方法,传入目标路径或名称来实现跳转。 例如,在一个名为test的Vue组件中,可以使用this.$router.push()方法跳转到/testDemo页面,如下所示: <template> <div> <button @click="goTo()">点击跳转</button> </div> </template> <script> export default { name: 'test', methods: { goTo() { // 直接跳转 this.$router.push('/testDemo'); // 带参数跳转 this.$router.push({path: '/testDemo', query: {setid: 123456}}); this.$router.push({name: 'testDemo', params: {setid: 111222}}); } } } </script> 通过以上方法,你可以在Vue2中实现点击跳转页面的功能。希望对你有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值