Question

我花了太多时间在这个看似简单的问题上。我有一条路线，page2定义如下：

// app.module.ts
import { Page2Component } from './page2/page2.component';

@NgModule({
  declarations: [
    AppComponent,
    Page2Component
  ],
  imports: [
    BrowserModule, RouterModule.forRoot([
      { path: 'page2', component: Page2Component },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在<base href="/">中检查了index.html。但是，当我手动输入http://localhost:4200/page2时，我总是会重定向回主页（在app.component中定义）。

我重新开始了快速入门指南的时间和时间，但无法理解为什么。我的路线定义出了什么问题？

修改：我使用全新的应用（通过ng new test-app）和新的page2组件（ng generate component page2）对其进行了测试。仍然是同样的问题。我现在比较困惑。

Answer 1

我猜你错过了将<router-outlet></router-outlet>添加到你的App.component.html，

将其添加到要加载路径组件的app.component.html中

Answer 2

最可能的问题是您还没有导入RouterModule或路由。

请务必加入：

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

编辑：在上一个答案中我提到了一个可能的其他问题，但路由不需要输入。如果您已包含这两者，则可能是与浏览器相关的错误（这种情况发生在没有启用路由参数转发的Apache服务器上）。如果您尝试ng build并使用dist文件，则需要启用参数转发。请参阅github上的this post。您仍然可以使用ng serve在本地运行您的应用程序而不会出现任何问题。

Answer 3

我找到了另一篇帖子Angular2 - app.module routing: blank path not redirecting to component来解决我的问题。当我从以下地方切换时：

export const ROUTES: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent  }
];

到

export const ROUTES: Routes = [
  { path: 'dashboard', component: DashboardComponent  },
  { path: '', component: LoginComponent }
];

它开始起作用了。

角度路由始终重定向到主页

3 个答案: