Angular 路由：有一个异常的单页应用程序

Question

我想用默认路由创建一个单页应用程序 DOMAIN/main。我的目标是，所有其他 URL 都被重定向到这个。唯一的例外是 DOMAIN/privacy，它应该打开另一个包含隐私相关内容的组件。

例子

具有期望和实际行为的示例：

URL	Expected Behaviour	Actual Behaviour
DOMAIN	DOMAIN/main	DOMAIN/main
DOMAIN/main	DOMAIN/main (just open MainPageComponent)	DOMAIN/main/main
DOMAIN/asdf/bcd	DOMAIN/main	DOMAIN/asdf/bcd (nothing happens except for some errors because it cannot find any `runtime.js` and similar files in there (obviously))
DOMAIN/privacy	DOMAIN/privacy (just open ImprintComponent)	DOMAIN/privacy/main

（错误的加粗）

到目前为止我最好的尝试

我最好的尝试是以下（导致上述行为）：我通读了很多帖子，但对我来说，没有什么能像我期望的那样真正起作用（甚至 ** 部分...）。

const routes: Routes = [{
  path: "main",
  component: MainPageComponent,
  pathMatch: "full",
},
{
  path: "privacy",
  pathMatch: "full",
  component: ImprintComponent
},
{
  path: "",
  redirectTo: "/main",
  pathMatch: "full",
},
{
  path: "**",
  redirectTo: "/main",
}]

imports: [
  RouterModule.forRoot(routes)
],

问题

如何使它正常工作？我真的不明白那些奇怪的重定向/路径，也不明白为什么 ** 即不匹配 /asdf/bcd 并因此重定向到 /main...

如果您需要更多信息，我会尽快提供。谢谢！ :)

Answer 1

删除主目录中的 pathMatch: 'full' 并将其保存在隐私目录中。另外，你不需要 '**'

它应该看起来像：

const routes: Routes = [{
  path: "main",
  component: MainPageComponent,
},
{
  path: "privacy",
  component: ImprintComponent,
  pathMatch: "full"
},
{
  path: "",
  redirectTo: "/main",
  pathMatch: "full",
}]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 2

你可以像下面这样使用它。除了重定向，您还可以提供组件本身。此外，从除“”以外的配置中删除 pathMatch 参数。

const routes: Routes = [{
  path: "main",
  component: MainPageComponent,
},
{
  path: "privacy",
  component: ImprintComponent
},
{
  path: "",
  component: MainPageComponent,
  pathMatch: "full",
},
{
  path: "**",
  component: MainPageComponent,
}]

Answer 3

天哪，我终于解决了这个问题。正如我已经怀疑的那样，路由本身并不是问题所在。为了构建 Angular-Project，以便我可以在实时服务器上使用它，我将 "baseHref": "" 添加到 anglar.json

因此 现在可以工作了 只需删除 "baseHref": "" 或将 ig 更改为 "baseHref": "/"。

Angular 路由：有一个异常的单页应用程序

Angular Routing: Single-Page Application with one Exception

routes

single-page-application

angular

例子

到目前为止我最好的尝试

问题