Angular6懒加载场景下router.navigate跳转异常求助

嘿，我之前也碰到过一模一样的问题！你遇到的this.router.navigate(['/landing'])跳转后立刻回退到登录页的情况，大概率是表单默认提交行为没有被阻止导致的，我来给你拆解下原因和解决办法：

问题根源 #

如果你的登录按钮是放在<form>标签里，并且按钮默认是type="submit"（浏览器默认按钮类型就是submit），那点击按钮时会先执行你写的login()方法完成路由跳转，紧接着浏览器会触发表单的默认提交行为——这会导致页面重新加载或者路由重置，看起来就像是landing页面闪了一下又回到登录页。

而<a routerLink="/landing">能正常工作，是因为它是Angular的路由链接，不会触发表单的默认提交逻辑，自然不会有回退的问题。

解决方案 #

你可以从以下几个方式里选一个来解决：

1. 修改按钮类型为button #

把登录按钮的type明确设置为button，这样就不会触发表单提交：

<button type="button" (click)="login()">登录</button>

2. 在登录方法中阻止默认事件 #

如果你的登录逻辑是绑定在表单的ngSubmit事件上，记得在方法里阻止默认行为：

• 模板代码：

<form (ngSubmit)="login($event)">
  <!-- 表单内容 -->
  <button type="submit">登录</button>
</form>

• 组件代码：

login(event: Event){
  // 阻止表单默认提交行为
  event.preventDefault();
  this.router.navigate(['/landing']);
}

3. 检查路由守卫（额外排查项） #

如果上面的方法都没用，你可以检查下landing路由有没有配置CanActivate守卫。如果守卫逻辑有误（比如错误判断用户未登录，强制重定向回登录页），也会导致这个问题。不过从你用routerLink能正常访问的情况来看，这个可能性比较小，但也可以顺手排查下。

快速验证方法 #

你可以先在login()方法里加个console.log('登录方法执行')，再点击登录按钮，看看控制台会不会输出两次日志（一次是你的方法，一次是表单提交触发的页面刷新），如果是，那就坐实了是默认提交行为的问题。

内容的提问来源于stack exchange，提问作者Hikaru Shindo