Question

我正在开发一个包含两个部分的应用。公共和私人（经过身份验证和未经身份验证的）部分。

我的主要app路由的定义如下：

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/public/login',
    pathMatch: 'full'
  }, {
    path: 'public',
    loadChildren: 'app/public/public.module#PublicModule',
  }, {
    path: 'private',
    loadChildren: 'app/private/private.module#PrivateModule'
  }
];

然后在PublicModule中我有：

const publicRoutes: Routes = [
    {
        path: '',
        component: FullscreenComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent,
            },
            {
                path: 'unlock',
                component: UnlockComponent
            }
        ]
}];

在我的私人模块中也有同样的事情：

const privateRoutes: Routes = [
    {
        path: '',
        component: PrivatePageComponent,
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
                canActivate: [AuthGuard]
            }, {
                path: 'general',
                component: GeneralComponent,
                canActivate: [AuthGuard]
            }
        ]
    }
];

我遇到的是默认路由。当用户请求/时，我原本希望将其重定向到/public/login，但事实并非如此。它保持在/。如果我直接导航到/public/login，我会看到我期望看到的内容。

我不确定我错过了什么。

我遇到的第二个问题是/public，但不显示/public/login，但这并不重要。

我是否遗漏了路线如何在这里工作的事情？

我遇到的第三个问题是，当我尝试访问/private/dashboard时，它会重定向到/。我假设我可以让/重定向工作，这不会有问题。

Answer 1

将appRoutes和publicRoutes更改为：

<强> AppRoutes

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'public',  //<--- Change this route path
        pathMatch: 'full'
    }, {
        path: 'public',
        loadChildren: 'app/public/public.module#PublicModule',
    }, {
        path: 'private',
        loadChildren: 'app/private/private.module#PrivateModule'
    }
];

<强> PublicRoutes

const publicRoutes: Routes = [
    {
        path: '',
        component: FullscreenComponent,
        children: [
            {
                path: '',              // <--- Add this empty path route
                redirectTo: 'login'
            },
            {
                path: 'login',
                component: LoginComponent,
            },
            {
                path: 'unlock',
                component: UnlockComponent
            }
        ]
}];

这应该解决你的三个问题中的前两个。

延迟加载模块之间的路由

1 个答案: