Angular 7 直接 url 路由不使用 id

Question

如果我点击导航链接我有按钮上的代码点击它工作正常

this.router.navigate(['/dashboard', this.selectedDateString]);

然而，当我在地址栏中手动输入 url 时，如下所示

http://myapp/dashboard/01152020

我得到一个

禁止！

信息。 为什么路由在应用程序内部起作用，而不是在直接地址栏输入中起作用？

这是我的路由模块

const appRoutes: Routes = [ { path: 'dashboard/:date', component: DashboardComponent }, { path: 'dashboard', component: DashboardComponent }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, { onSameUrlNavigation: 'reload' } ) ], exports: [ RouterModule ] }) export class AppRoutingModule {}

Answer 1

我同意@TheHeadRush。

听起来您没有将服务器配置为通过从这些端点返回基本文档来处理前端路由。

如果您不希望服务器处理该问题，您可以告诉 Angular 使用HashLocationStrategy ，它将使用 hash 片段导航到页面。

因此，而不是http://myapp/dashboard/01152020 ，你的 url 在浏览器中看起来像这样http://myapp#/dashboard/01152020

您将像这样在您的根应用程序模块中提供它。

@NgModule({
  imports: [
    BrowserModule,
    MyFeatureModule,
  ],
  providers: [
    {
      provide: LocationStrategy, useClass: HashLocationStrategy,
    },
  ]
})
export class AppModule {}

Answer 2

尝试使用<a>标记和路由器链接从html测试它，如下所示

      <a [routerLink] = "['dashboard', selectedDateString]" href="javascript:;"></a>