一般而言,登录成功后页面会进行跳转,但我最进遇到一个问题,会导致原应该进行跳转的登录,在成功输入完账号密码以及验证码后,点击登录按钮,弹出登录成功的提示框,点击确定后,却没有跳转到主页面。如下图
登录提示
出现后,自查登录代码,跳转路径反复排查后发现,相关代码都没有问题,排查中发现虽然没有跳转页面,但虽说页面没有成功跳转但其实,但它却是成功登录的了。在控制器中能获取到成功登录后设置的session及cookie值。以往也没遇到过能登录成功而页面停留在登录页面没有跳转的情况,只得去请教别人。
那是什么原因会导致她在输入并验证完验证码账号以及密码后,没有进行跳转在原页面刷新的。

查询资料后

Button type= “submit”;
Type
Button的类型,可选值(类型详解来自mdn
• submit: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。
• reset: 此按钮重置所有组件为初始值。
• button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。
• menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。

正是这个button的类型属性的设置为submit会导致其不会跳转。正是由于在登录按钮设置了submit这个属性值用作表单数据提交的,但在登录窗口,(在输入完账号密码以及验证码后,弹出文本提示框。)确不会进行页面跳转
可以发现:button如果没别的,就会一动不动;submit如果没别的,就会刷新页面(应该是一闪然后保持原页面);然后保持原页面。
原button type
处理方案:将原来设置为submit的值,更改为button。Button按钮发挥她按钮的功能提交账号,密码,验证码。再次点击完登录按钮后,系统验证完账号密码后,成功登录到主页面
效果图
在这里插入图片描述
总结:自己做总是会出现些莫名其妙的事,这次要知道button的type的值不能随意设置,一不小心连登录都办不到。Submit用作提交表单数据。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐