Angular

Question

我正在使用 Angular 6 开发一个应用程序，我需要处理我的应用程序中的未知路由。

例如：

Instagram 有一个默认页面 (instagram.com)，但如果你写 (instagram.com/user)，他们会将你重定向到用户个人资料，我需要做的正是在我的 Angular 应用程序中有相同的行为。

按照我的路线：

const APP_ROUTES: Routes = [
  {
    path: '', 
    redirectTo: 'home',
    pathMatch: "full"

  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "in-development",
    component: InDevelopmentComponent
  },
  {
    path: "**",
    component: DefaultPageComponent
  }

];

export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES, { useHash: true });

默认情况下，我的应用程序重定向到 /home，但我想重定向到 DefaultPageComponent 如果我键入：localhost:4200/pedro 并获取整个 path (包括 pedro).

感谢大家的帮助！

Answer 1

这对我有用

{
  path: '**',
  loadChildren: () => import('./path/to/your/component.module').then(m => m. DefaultPageComponentModule),
}

Answer 2

您必须在带参数的通配符 (**) 之前放置一条路线。这样的事情应该有效：


    const APP_ROUTES: Routes = [
      {
        path: '', 
        redirectTo: 'home',
        pathMatch: "full"

      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: "login",
        component: LoginComponent
      },
      {
        path: "in-development",
        component: InDevelopmentComponent
      },
      { path: ':userName', component: UserPage },
      {
        path: "**",
        component: DefaultPageComponent
      }

    ];

    export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

顺序很重要：始终将更具体的路线放在第一位（否则您将无法到达）。

我还建议您像这样为用户路由命名空间：

{ path: 'users/:userName', component: UserPage },

Angular - 处理未知路由以确定行为

Angular - Handle unknown route to determine the behaviour

angular-router