angular - 如何在 Angular 中重新加载页面后保持在同一页面

Question

前几天我开始学习Angular并尝试做一个简单的SPA。我添加了 2 个组件并为它们添加了路由:

const appRoutes: Routes = [
  {path: 'main', component: MainPageComponent}, //default page
  {path: 'registration-form', component: RegistrationPageComponent}, //"another" page
  {path: 'login-form', component: LoginPageComponent},
  {path: '**', component: PageNotFoundComponent}
];

所以我有默认路由到主页及其上的按钮，该按钮导航到另一个页面(组件):

<button style="border-color: transparent;"  type="button"
        class="item7 btn btn-secondary btn-pill" [routerLink]="['/registration-form']">
   <i class="fa fa-sign-in mr-2"></i>
   {{logButtonTitle}}
</button>

当我单击此按钮时，它成功地将我导航到另一个页面(组件)，但如果我在另一个页面上按 F5(浏览器页面重新加载)，我的应用程序会忘记我的第二页并加载默认页面。 所以，我不知道如何在页面重新加载后留在另一个页面上，以及是否可以这样做。

P.s. - 我试图找到有关它的任何信息，但我找到的所有解决方案都没有帮助我。

谢谢!

更新: app.components.ts中的代码

这里我总是在应用程序启动时加载默认页面:

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(
    private router: Router
  ) {}

  ngOnInit(): void {
    this.router.navigate(['/main']);
  }
}

Answer 1

您始终会被重定向到 main 路由，因为您在根组件中指定导航到 main 路由。

每次重新加载应用程序时，其路由状态都会丢失。所以你应该从你的根组件中删除它。我不明白你为什么要这么做。

如果您希望默认使用 main 路由，请在路由模块中添加以下内容:

const appRoutes: Routes = [
  // first line redirects to '/main' instead of '/'
  {path: '', redirectTo: 'main',
  {path: 'main', component: MainPageComponent}, //default page
  {path: 'registration-form', component: RegistrationPageComponent}, //"another" page
  {path: 'login-form', component: LoginPageComponent},
  {path: '**', component: PageNotFoundComponent}
];