重新加载 Angular 应用程序时，始终转到根页面，忽略路由

Question

我有一个简单的 Angular 应用程序，它使用 router。

我的路由逻辑很简单

Routes = [
  { path: '', component: MyMainComponent },
  { path: 'error', component: ErrorComponent },
]

如果应用程序发生错误，逻辑将导航到 ErrorComponent，因此我在浏览器 url 上看到的是 http://localhost:4200/error。

如果用户从此处重新加载应用程序（例如使用 CMD+R），应用程序将返回到错误页面。有没有办法强制重新加载到 Main，即使我们重新加载指向现有路由路径的 url？

Answer 1

是设计的问题。如果确实发生错误，您应该提供 angular 信息。

它可能是一个存储上次错误的服务，当执行导航时会检查该服务。因此，当页面刷新时，该服务将不包含任何内容，您可以导航到默认路由
或者您可以向 error 路由提供额外的查询参数，该参数将在导航结束时被删除，并且当用户刷新页面时它不会在 url 中。因此，查看此参数的唯一方法是在应用程序内部导航。

事实上，这些方法是相似的——不同之处在于您存储内部导航信息的方式。

不依赖于您选择的方法，为了将导航限制到特定路线，您可以使用 CanActivate guard https://angular.io/api/router/CanActivate

Answer 2

下面是我解决这个问题的方法。

1.) 将你的组件包裹在一个根组件中，像这样

Routes = [
{ path: '', component: HomeComponent, children:[
  { path: '', component: MyMainComponent },
  { path: 'error', component: ErrorComponent }
  ]
]

2.) 在 HomeComponent 的构造函数中，将最后导航的 url 存储在 localstroage 中。

  constructor(private router: Router) {

    this.router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      localStorage.setItem("lastUrl",event.url);
    })

  }

3.) 监听你的 AppModule 的构造函数（每次页面刷新后都会被触发），并检查路由器上次是否在某个页面上，然后重定向到您想要的页面。

  public constructor(private router: Router) {

    if(localStorage.getItem("lastUrl")=="/error")
    {
      localStorage.setItem("lastUrl",null);
      this.router.navigate(['/']);
    
    }
  }

重新加载 Angular 应用程序时，始终转到根页面，忽略路由

When reloading an Angular app go always to the root page ignoring routing

angular-routing

angular

angular-router