Angular4直接URL路由总是重定向到/主页

Question

我有一个与我的Angular路由行为有关的问题。刷新页面或输入类似于/user的URL时，我总是会被重定向到/home。我也在index.html文件中设置了。点击导航菜单按钮一切正常。但是，一旦我尝试刷新页面（例如/register），我就会被重定向到/home。

我在我的app.module.ts上做错了什么？

它看起来像这样：

import { LanguageService } from './_services/language.service';
import { JwtStorageAdapter } from './_helpers/JwtStorageAdapter';
import { TruncatePipe } from './_helpers/truncatePipe';
import { RegisterService } from './_services/register.service';
import { UserService, AlertService, AuthenticationService, EventService, MemberService, ParticipationService } from './_services/index';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { CreateMemberComponent } from './user/members/create-member/create-member.component';
import { EditMemberComponent } from './user/members/edit-member/edit-member.component';
import { MaterializeModule } from 'angular2-materialize';
import { NavbarPublicComponent } from './navbarPublic/navbarPublic.component';
import { EventsComponent } from './user/events/events.component';
import { AuthGuard } from './_guards/index';
import { MembersComponent } from './user/members/members.component';
import { RegisterComponent } from './register/register.component';
import { AlertComponent } from './_directives/index';
import { NavbarUserComponent } from './user/navbarUser/navbarUser.component';
import { TeamsComponent } from './user/teams/teams.component';
import { AdminComponent } from './user/admin/admin.component';
import { CreateEventComponent } from './user/events/create-event/create-event.component';
import { DownloadComponent } from './download/download.component';
import { EventDetailComponent } from './user/events/event-detail/event-detail.component';
import { FooterComponent } from './footer/footer.component';
import { SocialmediconsComponent } from './footer/socialmedicons/socialmedicons.component';
import { AgbComponent } from './agb/agb.component';
import { EventsPastComponent } from './user/events/events-past/events-past.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'download', component: DownloadComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'agb', component: AgbComponent },
  { path: 'user/events', component: EventsComponent, canActivate: [AuthGuard] },
  { path: 'user/members', component: MembersComponent, canActivate: [AuthGuard] },
  { path: 'user/teams', component: TeamsComponent, canActivate: [AuthGuard] },
  { path: 'user/admin', component: AdminComponent, canActivate: [AuthGuard] },
  { path: 'user/events/create', component: CreateEventComponent, canActivate: [AuthGuard] },
  { path: 'user/events/detail', component: EventDetailComponent, canActivate: [AuthGuard] },
  { path: 'user/members/create', component: CreateMemberComponent, canActivate: [AuthGuard] },
  { path: 'user/members/edit', component: EditMemberComponent, canActivate: [AuthGuard] },
  { path: 'user/events/events-past', component: EventsPastComponent, canActivate: [AuthGuard] }
  //{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    AlertComponent,
    AboutComponent,
    HomeComponent,
    LoginComponent,
    NavbarPublicComponent,
    EventsComponent,
    MembersComponent,
    RegisterComponent,
    NavbarUserComponent,
    TeamsComponent,
    AdminComponent,
    CreateEventComponent,
    TruncatePipe,
    CreateMemberComponent,
    EditMemberComponent,
    DownloadComponent,
    EventDetailComponent,
    FooterComponent,
    SocialmediconsComponent,
    AgbComponent,
    EventsPastComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterializeModule
  ],
  providers: [
    AuthGuard,
    AlertService,
    AuthenticationService,
    UserService,
    EventService,
    MemberService,
    RegisterService,
    ParticipationService,
    JwtStorageAdapter,
    LanguageService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

- tobtherush

Answer 1

可能的解决方案：

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },  <---add this
  { path: 'home', component: HomeComponent }
..........
]

- Mahi

Answer 2

请添加 pathMatch: 'full'。将您的第一个路由更改为：

{ path: '', component: HomeComponent }

致：

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

- Fateh Mohamed

Answer 3

抱歉打扰了。 为了解决问题，我不得不从app.component.ts中删除导航：

  ngOnInit() {
    -->  this.router.navigate(['home']);
  ...

- tobtherush

---

不需要使用this.router.navigate(['home'])进行路由，只需要使用{ path: '', redirectTo: 'home', pathMatch: 'full' }就足以将默认路径设置为“home”。 - Mahi

我也犯了同样的错误。不需要手动路由。使用Fateh Mohamed提供的解决方案即可。 - Nikhil