在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键（浏览器页面重载），我的应用程序就会忘记我的第二个页面，并加载默认的页面。

更新:app.component.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}
];