Angular路由刷新异常问题求助

这种刷新页面就跳回初始路由的问题我在项目里碰到过好几次，结合你的场景（点击跳转正常但刷新异常），给你几个具体的排查和解决方向：

• 检查通配符路由的位置：Angular路由是按顺序匹配的，**这个通配符路由一定要放在每个路由数组的最后面，不管是根路由（app.module里的）还是子路由（partehoras.module里的）。如果通配符路由在前面，刷新时会优先匹配到它，然后跳转到你设置的初始路由。确保所有路由配置里，path: '**'的条目是最后一个。

• 验证子路由的配置细节：如果partehoras.module是懒加载的，先确认根路由里的懒加载配置是否正确（比如用loadChildren引入）。另外，子路由里的默认路由（path: ''）要加上pathMatch: 'full'，不然刷新时Angular可能会错误匹配到其他路由分支，导致跳回初始页。比如子路由里的默认路由应该是：

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

• 排查路由守卫的逻辑：如果你用了CanActivate、CanLoad这类路由守卫，看看守卫里是不是依赖了内存中的状态（比如用户信息、页面状态）。刷新页面时内存状态会清空，如果守卫判断状态不存在就强制跳转到初始路由，那肯定会出问题。这时候要调整守卫逻辑，比如从localStorage或者后端接口获取必要的状态，而不是只依赖内存数据。

• 尝试切换到Hash路由模式：如果你的部署服务器没有配置HTML5模式的路由支持（也就是服务器不知道如何处理Angular的路由路径，刷新时返回404），Angular就会自动跳回初始路由。这时候可以在根路由配置里开启Hash模式：

  RouterModule.forRoot(routes, { useHash: true })
  

  这样路由URL会带上#，刷新时服务器只会处理#前面的根路径，Angular就能正确解析后面的路由了。

• 确认base href的正确性：检查index.html里的<base href="/">设置是否和你的部署路径匹配。如果你的项目不是部署在服务器根目录，比如部署在特定子路径下，就要把base href改成对应路径，不然刷新时Angular无法正确解析路由路径。

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