Angular 2路由重定向到具有子路由
我是Angular 2的新手。我想为我的应用程序的每个部分创建独立的模块。例如，我使用default AuthModule - AuthComponent创建了组件，其中包含他的子组件(SignIn或SignUp)的router-outlet。因此，我想要实现以下场景：
- 导航到/-根目录关闭应用程序-重定向至/auth
- 后重定向至/auth-使用路由器插座加载AuthComponent加载
- 在加载AppComponent后-通过重定向到AppComponent加载默认登录组件
但是当我转到localhost/时，我会重定向到我想要的/auth，但是下一个重定向到登录没有出现。
我的代码：app.routing
const routes: Routes = [
{
path: '',
redirectTo: '/auth',
pathMatch: 'full'
}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);auth.routing
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{
path: '',
redirectTo: 'sign-in',
pathMatch: 'full'
},
{
path: 'sign-in',
component: SignInComponent
}
]
},
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);auth.component.html
<div class="container">
<h1>Auth component</h1>
<router-outlet></router-outlet>
</div>结果：
环境@angular/cli: 1.0.0-rc.2节点: 7.7.1操作系统: win32 x64
回答 7
Stack Overflow用户
发布于 2017-05-02 19:46:09
我也遇到过同样的问题。这似乎是个小把戏:如果你去掉了'redirectTo‘字段中的前导斜杠，你的应用程序将被成功地重定向到身份验证/登录。
在app.routing中使用此命令：
const routes: Routes = [
{path: '', redirectTo: 'auth', pathMatch: 'full'},
];‘redirectTo’值以‘/’=绝对路径开头
‘redirectTo’值开始时不带‘/’=相对路径
阅读更多关于它的信息：https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
附注:我认为你的结构比尤内斯M的结构更正确。父模块不能保持子路由："app“模块不知道"auth”模块有子模块"sign-in“。
Stack Overflow用户
发布于 2018-12-18 03:51:50
在auth.routes上
const routes: Routes = [
{
path: "auth",
redirectTo: "auth/sign-in"
},
{
path: "auth",
component: AuthComponent,
children: [{ path: "sign-in", component: SignInComponent }]
}
];Stack Overflow用户
发布于 2017-03-18 23:03:14
因此，可能发生的情况是，当您执行redirectTo:'auth'操作时，它会尝试加载''子组件，并且由于它没有任何组件，所以路由器插座是空的。
现在看起来{path: '', redirectTo: 'sign-in', pathMatch: 'full'}没有任何其他用途了，那么重定向到sign-in就可以了，所以你可以直接重定向到/auth/sign-in。
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];或者在您的''路径中添加一个组件，而不是重定向。
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: '', component: SignInComponent}
]
},
];https://stackoverflow.com/questions/42874859
复制相似问题