简单但烧脑的跳转bug，一定要耐心看完
大家看这个bug啊
老神奇了
就这个注册按钮
我点一下呢
没跳转对吧
而且刷新了一下
我再点击一下呢
哎还没跳转
所以呢我再点击一下哎
跳过来了
怎么回事呢
我给大家一点点破案啊
为什么点三次？
首先呢第一次刷新
肯定是因为这有一个form表单
然后button呢
它默认又是submit
所以呢正常
如果我们把它改成正常的button
它肯定这个问题就解决了啊
我们再来试一下
大家看啊！点一下哎
直接就好了
但是呢为什么之前这种情况
第二次点击它就不刷新了
我们再来试一下
大家看第一次刷新了
但是第二次点虽然没跳转
但是没刷新
那为什么他第二次点击没有刷新呢
两个因素啊
第一个因素是这个URL里边有个井号
也就是说他用了哈西模式
但对于纯html来说
这就是一个锚点
那第二个因素就是
他第二次点击的时候
URL（#前面部分）没有变化
有同学会说
同样是点击
为什么第二次没有变化
我们再来看一下啊
注意看
现在这块没有问号
注意看
但是呢如果点第一次点击之后
它就会多一个问号
就说我们点击的时候
它会拼接form表单里这些元素的参数
因为是get（请求）嘛
所以它没有任何参数的时候
它就会加一个问号
我们来看这个例子啊
这是一个纯html
页面里边很简单的submit
大家看就多了一个问号
所以回到这
我们第一次点击的时候
虽然是有井号
但是呢因为form
表单要拼接一个问号
所以URL变化了
导致它就刷新了
但是第二次再点击的时候
因为已经有了问号了
而且还有井号
所以呢整个URL是没有变化的 （主要是#前面的部分没变）
这个时候他就不会再刷新了注意看
上面那个进度条是自己画的啊
其实没有刷新
我们再拿这个验证一下啊
然后第一次点击他会多一个问号
而且提交了
每次点击大家看它都有刷新
但是呢
注意只要我给它加一个井号去访问
大家看第一次刷新了对吧
而且多了个井号
但第二次再点的时候呢
它就不刷新了
原因就是这种带井号的地址
说明他是带锚点的
只要地址栏（#前面部分）没有变化
他是不刷新的
他就去找那个锚点
（虽然这个锚点不存在）
我们可以验证一下
下边其实是有一个我定义了锚点
大家看在这里
那这时候呢
我如果访问 123看到了吗
他就会跳到下边好
然后点提交
注意看
刷新了
而且跳到这了
但是呢我回到上面
我再点提交
大家看页面没有刷新
他就跑到下边来了
所以我们再回到这个例子
因为这项目用了hash模式的路由
所以当他第二次点击的时候呢
纯html的规则
会认为你网页的路由（#前面部分）整体没有变化
所以他不刷新了
但是呢还没完
有同学会问
为什么第二次点击它（虽然）不刷新了
但是它也没有跳转啊（bug还在）
我们来看一下控制台哈
注意看
他是先实现了跳转
大家注意他跳了注册页
随后呢他又回到了登录页
为什么？第一次跳转
就是他这个按钮自身的点击
事件生效了
跳到了注册页
然后接下来事件冒泡到上面（form表单）
提交了form表单
他又回到了这个login页面
所以呢我们看上去他又没变
那为什么第三次点击就可以
这个就更有意思了哈
可以了是吧（跳转了）
但是我们看控制台这报了一个错误（警告）
说from表单的提交被取消了
因为啊这个from表单已经不存在（找不到）了
也就是说第三次点击的时候
也是先触发（跳转）了register
然后触发了form的submit
但是当触发到form submit的时候
这个form表达已经没有了
所以它就没有实现这个跳转（口误：提交）功能
然后肯定又会有同学会问
为什么第二次点击没有出现这种情况（form表单就没有消失）
为什么呢
原因就是他第二次点击的时候
要走一个加载
我们来看一下啊
我先让它刷新一下
第一次点一下好
第二次点击
注意看啊
他要请求一下这register.vue
也就是说这是一个懒加载
第二次点击的时候
它要先加载进来这个vue
所以呢虽然说他先触发了跳转
但是呢由于他要加载注册页（目标）
要需要一些时间
还没等它加载完呢
它就触发了注册（口误：又触发了submit事件）
就回来了
但是第三次点击的时候
它就不需要再加载了
它很快的就会跳过去 （因为前面加载过了）
等到再执行到提交（submit）事件的时候呢
这个表单已经不存在了
我先把问号去掉
我再来清空一下，注意看
最后更新于
这有帮助吗？