Angular 5 - 在浏览器刷新时将页面重定向到主页

Question

目前，当我从

这样的路径刷新页面时

http://localhost:4200/feedback

它保持在同一条路线上。但我希望路由重定向到

http://localhost:4200

我看到有人问如何实现刷新保持在同一条路线上。所以我想，默认 angular 应该在浏览器刷新时重定向到主页。知道为什么我的 angular 默认项目不这样做吗？

下面是我的 AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SmileyFeedbackComponent } from '../smiley-feedback/smiley-feedback.component';
import { FeedbackFormComponent } from '../feedback-form/feedback-form.component';
import { ThankYouComponent } from '../thank-you/thank-you.component';

const routes: Routes = [
  { path: '', redirectTo: '/smiley', pathMatch: 'full' },
  { path: 'smiley', component: SmileyFeedbackComponent },
  { path: 'feedback', component: FeedbackFormComponent },
  { path: 'thank-you', component: ThankYouComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

Answer 1

正如 Chris Sharp 所提到的，您的应用程序正在做它应该做的事情，路由到 url 指向的地方，因为您没有另外告诉它。

您可以做的是，在您的 app.component 中，您可以在 OnInit 中重定向到 root。这意味着当应用程序被（重新）初始化时，您将被重定向到根页面。

export class AppComponent { 
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate([''])
  }
}

Answer 2

导入路由器

import { Router } from '@angular/router';

在构造函数中启动路由器

export class LoginComponent implements OnInit {
 constructor(private router:Router) {}
  loginCheck() {
    /*Your HTTP REQUEST HERE */
    this.router.navigate(['/*Your Path Here*/']) 
  }
}

Answer 3

如果您需要在 angular 8 中重新加载页面，请执行以下操作，它对我有用。

<a href="/page">Go to page</a>

Angular 5 - 在浏览器刷新时将页面重定向到主页

Angular 5 - redirect page to homepage on browser refresh

typescript

angularjs-ng-route

angular