vue3项目点击按钮，第一次点击按钮会页面大刷新，且url上，# 前多了问号

最新推荐文章于 2025-05-15 11:42:50 发布

原创最新推荐文章于 2025-05-15 11:42:50 发布 · 551 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

解决问题记录专栏收录该内容

7 篇文章

订阅专栏

文章讲述了在HTML中，未指定类型的button默认会作为表单提交按钮，导致点击后执行submit事件并重置请求。解决方案是将按钮类型指定为button，或者使用el-button并结合@click.prevent阻止默认的表单提交行为。

原路径
http://localhost:8008/#/
点击按钮后路径
http://localhost:8008/?#/

原因：使用了原生按钮 button ，并且没有指定类型
W3C中有标明默认为表单提交按钮，这导致点击button按钮的时候同时执行了 form 表单的 submit 事件和自己设置的 click 事件，一次空的表单提交重置了请求。
在这里插入图片描述

解决方法：

指定按钮类型 type="button"
使用el-button
使用 @click.prevent 阻止默认事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Geeca

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3 路由

2012年开始工作，全栈开发老兵，目前已是一个老师，分享这么多年的心得体会

09-02

633

History Api就是window对象通过history对象提供的一个属性和方法的集合，允许开发者基于js操作用户浏览历史的前进、后退、刷新等浏览历史操作，同时提供了对浏览记录栈的操作。

3-3-nuxt.js实现 realworld-nuxtjs项目，同时学习部署在自己服务器上

cloveryuan的博客

09-21

1944

=》测试 -bui9bi NuxtJS 代码仓库地址：https://gitee.com/cloveryuan/realworld-nuxtjs 一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/ Github仓库：https://github.com/nuxt/nuxt.js 二、Nuxt.js的使用方式初始化项目已有的Node.js服务端项目直接把N

参与评论您还未登录，请先登录后发表或查看评论

VUE中实现点击按钮刷新页面的方法

热门推荐

weixin_42088314的博客

11-03

1万+

VUE中实现点击按钮刷新页面的方法vue中provide和inject 用法通过依赖注入实现页面刷新源码片段： vue中provide和inject 用法首先我们需要先了解一下vue中的依赖注入provide 和 inject 概念：作用：用于父组件向子孙组件传递使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间

Vue3按钮（Button）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

03-10

8989

丰富又好看的各种按钮，用于开始一个即时操作，支持：7 种类型；3 种形状；自定义按钮图标；三种尺寸；ghost 样式；自定义样式；设置链接跳转；禁用；加载中；自定义加载指示符；设置为 block 按钮等等，总之，功能丰富，简单易用😁😁

vue项目点击按钮（或回车）页面刷新问题

m0_46814663的博客

09-25

683

今天在开发过程中遇到一个问题：当点击查询按钮时，调用查询方法后页面重新刷新，导致查询到得数据无法显示。分析问题发现，是因为使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。

VUE3按钮点击完成效果

xiaoHelloWord的博客

05-26

662

【代码】VUE3按钮点击完成效果。

vue3点击按钮复制文本功能

qq_41697998的博客

11-25

1243

vue3点击按钮复制文本功能

vue从入门到精通之【vue-router】(八)

qq_36812154的博客

01-03

660

vue从入门到精通之【vue-router】(八) 前端路由（vue-router/react-router-dom）单页面应用& 多页面应用「SPA（single page application）单页面应用」：一个项目只有一个页面，我们基于路由，控制页面展示不同的片段（或组件），当展示内容改变的时候，页面并不会刷新！！「MPA（multi page application）多页面应用」：一个项目有很多页面，我们做的是页面之间的跳转，每一次跳转都是打开新的页面（相当于页面刷新了.

SGG前台项目复习笔记

zhuxinggua的博客

05-28

569

前端Vue核心开发一个前端模块可以概括为以下几个步骤：（1）写静态页面、拆分为静态组件；（2）发送请求（API）（3）vuex （actions、mutations、state三连操作）（4）组件获取仓库数据，动态展示 1.pges文件夹创建pages文件夹，并创建路由组件 1.1 在src下创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册 1.2 总结路由组件和非路由组件的区别：非路由组件放在components中（全局组

大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）

爱玲姐姐的博客

09-29

3078

NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署）一、案例项目realworld介绍 1. 案例项目介绍案例名称：RealWorld 这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。 GitHub仓库：https://github.com/gothinkster/realworld 在线实例：https://demo.realworld.io/ 2. 案例相关资源页面模板：https://github.com/gothinkster/real

vue中form表单中buttont点击事件提交,url路径被修改

weixin_47746653的博客

08-22

924

buttont点击事件

详解Vue3中的常见的监听事件click、input和change

一起学习

12-30

7712

本文主要介绍Vue3中的常见的监听事件click、input和change。

Vue中，点击提交按钮，路由多了个问号

m0_74462339的博客

05-27

707

问题原因路由中出现问号通常是由于某些路径或参数处理不当造成的。在该情况下，是因为表单的默认行为导致的。提交表单时，如果没有阻止表单的默认提交行为，浏览器会在 URL 中添加问号（?

vue项目中点击按钮事件突然刷新页面然后网页url中自动加上了问号

qq_45067263的博客

11-22

1106

项目场景： vue项目中点击按钮事件突然刷新页面然后网页url中自动加上了问号问题描述：就像这样原因分析： <button class="but b-shanc" @click="delRow">删除</button> 代码里用到了 form 标签，点击button按钮的时候同时执行了form表单的 submit 事件和自己设置的 click 事件，一次空的表单提交重置了请求。解决方案： 1：给button 按钮加上 type=“button”，否则默认是 su

Vue3自定义按钮点击变色

m0_64054560的博客

02-15

5117

vue3简单实现点击变色，默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色

Vue3实现简单axios请求

Sugar

03-31

382

Vue3实现简单axios完成请求

Vue3的事件