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

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 代码。在我的网站上唯一可见和可以看到的地方是索引.html。这与我的组件有关吗？

Answer 1

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

提示：尝试始终像您一样使用路由模块，但没有导入RouterModule.forRoot(...)。只需删除它就可以工作。