Angular 7 直接 url 路由不使用 id

Question

如果我点击导航 link 我在按钮上有代码点击它工作正常

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

尝试从 html 使用 <a> 标记和路由器 link 像这样测试它

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

Answer 2

我同意@TheHeadRush。

Sounds like you don't have your server configured to handle the frontend routes by returning the base document from those endpoints.

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

因此，您的 url 在浏览器中将如下所示 http://myapp#/dashboard/01152020

，而不是 http://myapp/dashboard/01152020

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

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

Angular 7 直接 url 路由不使用 id

Angular 7 direct url routing not working with id

angular

typescript

angular2-routing

禁止！