按应用程序包含应用组件 .html
<router-outlet></router-outlet>
带路由器
const routes: Routes = [
{
path: '',
component: LandingPageComponent,
canActivate: [AuthGuard],
children: [
{
path: 'dashboard',
canActivate: [AuthGuard],
component: DashboardComponent
},
{
path: '',
canActivate: [AuthGuard],
component: DashboardComponent,
},
]
},
{
path: 'login',
component: LoginComponent
},
{
path: '**',
redirectTo: 'dashboard'
}
];
登陆页面代码
<!-- side bar menu -->
<sidebar #sideBar id="sideBar"></sidebar>
<!-- /side bar menu -->
<!-- top navigation -->
<topbar></topbar>
<!-- /top navigation -->
<!-- page content -->
<router-outlet></router-outlet>
<!-- /page content -->
<!-- footer content -->
<bottomfooter></bottomfooter>
<!-- /footer content -->
我的守卫
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) { }
canActivate() {
return this.authService.user.pipe(
map(user => {
if (user) return true;
this.router.navigate(['/login']);
return false;
}));
}
}
一切正常,除了默认路由,它假设直接到仪表板,但它给了我带有侧面和顶部导航栏的空白页面
任何建议我如何解决这个问题