路由和导航：无法访问网页上的任何其他路由

Question

我正在使用 Angular 8，但在我的页面上遇到了路由问题。我已经生成了我需要的组件，并声明了它们并使用它们必要的路径导入它们，以便在网页上导航。

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";

import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from "@angular/fire/firestore";

import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { environment } from "src/environments/environment";

@NgModule({
  declarations: [AppComponent, HomeComponent, LoginComponent, SignupComponent],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: "", component: HomeComponent },
      { path: "login", component: LoginComponent },
      { path: "signup", component: SignupComponent }
    ]),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },

  {
    path: "home",
    component: HomeComponent
  },

  {
    path: "signup",
    component: SignupComponent
  },
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  }
];

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

既然我已经将所有必要的组件添加到应用程序模块，它不应该只在我更改 URL 并添加 /login 或 /signup 时工作吗？ 另外，我无法在组件中看到我的 html 代码。它在我的网站上唯一可见和可见的地方是 index.html。这与我的组件有关吗？

Answer 1

您的问题是您在其他路线之前声明了空路线。 Angular 将始终将您发送到它匹配的第一个 url。在您的情况下，{ path: "", component: HomeComponent } 是第一个匹配项，无论您尝试访问的网址是什么。

提示：尝试始终像您一样使用 RoutingModule，但不使用导入 RouterModule.forRoot(...)。只需删除它就可以了。