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

Posted 2023-02-23

【中文标题】路由和导航：无法访问网页上的任何其他路由

【英文标题】：Routing & Navigation: Cannot access any other routes on web page

【发布时间】：2020-05-26 06:56:56

【问题描述】：

我正在使用 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。这与我的组件有关吗？

【问题讨论】：

您的 HTML 模板中是否有 <router-outlet></router-outlet> 标签？

是的，在我的 app.component.html 中。

为什么你在 AppModule 中同时拥有RouterModule.forRoot([，但又导入了一个同样拥有RouterModule.forRoot([ 的路由模块？这也无济于事，因为它们在两者中都有一些相同的路线。

看起来我正在测试这两种方案，看看其中一种是否能胜过另一种。一个比另一个更好吗？

最好使用AppRoutingModule。在你的 appModule 中删除 RouterModule.forRoot(...)

【参考方案1】：

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

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

【讨论】：

感谢 Jorge，我能够在我的应用程序模块中删除路由模块，尽管我仍然无法路由到我的不同组件。我注意到的一件事是，例如，当我将 URL 更改为 /login 时，有一瞬间我看到一个空白的白色屏幕（登录组件），然后是一个灰色的屏幕，这是我的主页。我的组件中是否也需要路由器插座？我也无法在组件中看到我的 html 代码。只有在我的网站上可见并且可以看到的地方是 index.html，只有这样我才能在瞬间再次看到带有 html 代码的登录组件。

您将始终触发"" 路由。如果你去 /login，你会得到登录组件和来自空路由的组件。如果你想在任何路由上重定向，你应该使用path: "**"

好吧，有道理。路由仍然没有任何运气......不知道问题是什么我做了你建议的一切

如果你愿意，做一个 StackBlitz，我可以帮你

好的，我刚决定重新开始并创建一个新项目，现在我的路由工作正常。感谢您的帮助