Angular 5路由疑问：登录后如何保留导航菜单并加载内容

嘿，我来帮你搞定这个嵌套路由的问题！你遇到的情况其实是没配置对嵌套路由结构，导致点击链接时直接替换了根路由出口的内容，把整个dashboard都换掉了。咱们一步一步来解决：

1. 配置正确的嵌套路由结构 #

首先在你的app-routing.module.ts里，需要把dashboard设置为父路由，然后在它的children数组里定义子页面的路由。这样Angular就知道这些子路由是属于dashboard的，只会替换dashboard组件内部的路由出口，而不会替换整个根路由出口的内容。

示例代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './dashboard/home/home.component'; // 你的子组件
import { ProfileComponent } from './dashboard/profile/profile.component'; // 你的子组件
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  // 登录路由，根级别
  { path: 'login', component: LoginComponent },
  // Dashboard父路由，包含子路由
  { 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
      { path: 'home', component: HomeComponent }, // 首页子路由
      { path: 'profile', component: ProfileComponent }, // 个人资料子路由
      // 默认子路由：进入dashboard时自动跳转到home
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  },
  // 根路径默认跳转到登录页
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  // 404路由
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在Dashboard组件中设置导航和子路由出口 #

你的dashboard.component.html里需要保留导航菜单，然后在菜单下方添加<router-outlet></router-outlet>，这个出口就是用来加载子路由组件的。同时，导航链接要使用正确的路由路径（可以用相对路径，因为当前已经在dashboard路由下）：

示例代码：

<!-- 导航菜单 -->
<div class="dashboard-nav">
  <a routerLink="home" routerLinkActive="active-link">首页</a>
  <a routerLink="profile" routerLinkActive="active-link">个人资料</a>
  <!-- 其他菜单链接 -->
</div>

<!-- 子路由出口：这里会加载home、profile等子组件 -->
<div class="dashboard-content">
  <router-outlet></router-outlet>
</div>

这里的routerLinkActive是用来给当前激活的菜单添加样式的，你可以在CSS里定义.active-link的样式，比如高亮颜色。

3. 登录成功后的跳转逻辑 #

在你的登录组件（比如login.component.ts）里，登录成功后要跳转到dashboard路由，而不是直接跳转到子路由：

import { Router } from '@angular/router';

// 注入Router
constructor(private router: Router) { }

// 登录成功后的方法
onLoginSuccess() {
  // 跳转到dashboard，会自动加载默认的home子组件
  this.router.navigate(['/dashboard']);
}

原理说明 #

• 根组件（app.component.ts）里的<router-outlet>是顶级路由出口，用来加载登录页、dashboard这些顶级组件。
• Dashboard组件里的<router-outlet>是子路由出口，只会加载dashboard的子路由组件（home、profile等），所以导航菜单会一直保留在页面上。
• 嵌套路由的核心就是通过children属性把子路由挂载到父路由下，让Angular知道路由的层级关系。

这样配置后，你点击dashboard里的菜单链接，就只会替换菜单下方的内容，导航菜单会一直保留啦！

内容的提问来源于stack exchange，提问作者antoniodela