Bug:Vue路由不跳转而是刷新页面

简介: Bug:Vue路由不跳转而是刷新页面

问题

Vue路由不跳转而是刷新页面

解决

经过同事的仔细观察,发现点击跳转时,路由中多了一个【问号】并刷新页面没有发生跳转,再次点击才生效

方式一

使用了click.prevent阻止form表单的默认提交事件

<button @click.prevent="onSubmit" >登录</button>

方式二

button默认是submit类型,改成type=“button”

<button type="button"></button>

方式三

把 el-form 组件去掉。 因为也没什么必要,加了form 无非就是 在两个input 中按回车能自动提交

<el-row>
  <el-input v-model.trim="keywords" @keyup.enter.native="search()">
    <el-button  icon="el-icon-search" @click="search()">搜索</el-button>
  </el-input>
</el-row>

最后用方式3解决了问题

参考

Vue点击登录的时候自动加了问号?

相关文章
|
8天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
57 1
|
19天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
160 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
162 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
248 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
前端开发 Java 关系型数据库
前后端分离Springboot+Vue实现课程社区管理系统
本项目主要实现一个基于课程选课的社区交流系统,主要的业务背景为每个老师可以自己开设相应的选修课,并指定可以选修的人数,学生登陆系统后可以进行选课,并可以在线针对自己的选课进行在线讨论,点赞等互动行为。管理员则主要是对基本信息的相关管理,比如用户和角色、权限管理等,本系统有着完备的权限管理控制系统,可以根据需要自定角色并分配相应的权限。系统采用前后端分离开发的方式来实现。
194 0
前后端分离Springboot+Vue实现课程社区管理系统
|
JavaScript
Vue课程52命令v-if和v-show的区别
Vue课程52命令v-if和v-show的区别
144 0
Vue课程52命令v-if和v-show的区别
|
JavaScript
Vue课程45-事件绑定v-on指令的简写模式
Vue课程45-事件绑定v-on指令的简写模式
155 0
Vue课程45-事件绑定v-on指令的简写模式