angular9教程之分模块开发

ng g module frontend --route frontend --module app.module

ng g module frontend/blog --route blog --module frontend.module

const routes: Routes = [
    {
        path: 'frontend',
        loadChildren: () => import('./frontend/frontend.module').then(m => m.FrontendModule)
    },
    {
        path: '', // 默认跳转到 frontend 模块
        redirectTo: 'frontend',
        pathMatch: 'full'
    },
    {
        path: '**',  // 其他没有匹配到的路径都跳转到 frontend 模块
        redirectTo: 'frontend'
    },
];

<header>
    导航栏
</header>
<router-outlet></router-outlet>
<footer>
    <div class="copyright">
        <p>Copyright ©zodream.cn, All Rights Reserved.</p>
    </div>
</footer>

ng g component frontend/home

const routes: Routes = [
    {
        path: '',
        component: FrontendComponent,
        children: [
            {
                path: 'home',
                component: HomeComponent,
            }, {
                path: '',
                redirectTo: 'home',
                pathMatch: 'full',
            }, {
                path: '**',
                component: HomeComponent,
            }
        ]
    },
];

ng serve --open