在 Angular 单页面应用程序中配置默认​​路由和重定向

Question

我正在尝试在 Angular 中创建一个单页应用程序，其中默认路由设置为 DOMAIN/main。我的目标是将所有其他 URL 重定向到此默认路由，但 DOMAIN/privacy 除外，它应该打开与隐私相关的不同组件。

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

URL	预期行为	实际行为
DOMAIN	DOMAIN/main	DOMAIN/main
DOMAIN/main	DOMAIN/main （只需打开 MainPageComponent）	DOMAIN/main/main
DOMAIN /asdf/bcd	DOMAIN/main	DOMAIN/asdf/bcd （除了一些错误之外，没有任何反应，因为它找不到任何 runtime.js以及其中的类似文件（显然））
DOMAIN/privacy	DOMAIN/privacy （只需打开 ImprintComponent）	DOMAIN/privacy/main

（不正确的行为以粗体标记。）

我有浏览了几个帖子和示例，但我仍在努力实现所需的行为。我不完全理解重定向和路径的工作原理，以及为什么 ** 通配符与 /asdf/bcd 不匹配并重定向到 /main< /代码>。

这是我迄今为止尝试过的代码：

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

app.modules.ts内部：

imports: [
  RouterModule.forRoot(routes)
],

问题

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

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

Answer 1

删除 main 上的 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": "/" 即可实现。