Angular路由配置后操作当前页面自动跳转到主页问题排查

1. Faq组件内存在触发默认跳转的DOM元素 #

• 最常见的情况是你在Faq组件中使用了带有href="#"属性的<a>标签做交互按钮，点击该标签时浏览器会默认跳转到站点根路径，命中你配置的空路径路由，渲染Page组件。
• 解决方法：把纯交互用的<a>标签换成<button>，或者给点击事件加$event.preventDefault()阻止默认跳转行为。

2. 空路径路由未配置pathMatch: 'full' #

• 你当前的空路径路由配置为{ path: '', component: PageComponent }，Angular默认的路由匹配规则是pathMatch: 'prefix'，也就是只要路径前缀匹配就会命中该路由。虽然你当前路由顺序把data、login放在空路径前面，正常访问/data时会先命中Faq路由，但如果Faq组件内有路由相关的触发逻辑，很容易意外命中空路径路由。
• 解决方法：修改空路径路由配置，加上完整匹配规则：

{ path: '', component: PageComponent, pathMatch: 'full' }

3. Faq组件内存在主动路由跳转逻辑 #

• 检查Faq组件的代码，是否存在状态判断（例如登录态校验、接口请求失败回调）里调用了this.router.navigate(['/'])、this.router.navigateByUrl('/')这类跳转到根路径的代码，执行相关操作时触发了该逻辑就会自动跳回Page组件。
• 解决方法：根据业务逻辑调整跳转条件，或者注释/删除不必要的根路径跳转逻辑。

4. 表单提交未阻止默认行为 #

• 如果Faq组件内有表单，你没有给表单提交事件加$event.preventDefault()，浏览器会默认执行表单提交的GET/POST请求，导致页面重载，如果你的部署环境没有配置前端路由的 fallback 规则，重载后会回到根路径渲染Page组件。
• 解决方法：给表单的ngSubmit事件或者提交按钮的点击事件加上阻止默认行为的逻辑。

内容的提问来源于stack exchange，提问作者abhishek kumar