在项目文件夹src/app下建立routes文件夹,在src/app/routes下建立login文件夹和test文件夹,实现路由:http://localhost:4200/route/login和http://localhost:4200/route/test
前提:
1.app.component.html:
<router-outlet></router-outlet>
2.app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'route', loadChildren: './routes/routes.module#RoutesModule' },
{ path: '', redirectTo: '/route/login', pathMatch: 'full' },
//如果输入http://localhost:4200则自动跳到http://localhost:4200/route/login
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
开始:
1 .在项目demo的app下建立以下如图文件
2.routes.routing.ts与routes.module.ts写法
(2.1)routes.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
// 登录页面
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
},
// 测试页面
{
path: 'test',
loadChildren: './test/test.module#TestModule'
},
];
export const routerModule: ModuleWithProviders = RouterModule.forChild(
appRoutes
);
(2.2)routes.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { routerModule } from './routes.routing';
@NgModule({
declarations: [],
imports: [
CommonModule,
routerModule
]
})
export class RoutesModule {
}
3.test.routing.ts与test.module.ts写法
(3.1)test.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test/test.component';
const appRoutes: Routes = [
{
path: '',
component: TestComponent
}
];
export const routerModule: ModuleWithProviders = RouterModule.forChild(appRoutes);
(3.2)test.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { routerModule } from './test.routing';
import { TestComponent } from './test/test.component';
@NgModule({
declarations: [TestComponent],
imports: [
CommonModule,
routerModule
]
})
export class TestModule { }
4.login.routing.ts与login.module.ts写法参考可以参考第4步
5.启动项目,输入路径,如下