环境
node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
加载过程
相关文件
.
├── app-routing.module.ts # 路由
├── app.component.html # 页面
├── app.component.spec.ts # 测试
├── app.component.ts # 代码
├── app.module.ts # module
index.html
main.ts
第一步
index.html
引入AppComponent
<app-root></app-root>
main.ts
加载AppModule
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
第二步
app.component.html
引入ion-router-outlet，用于加载其他页面
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
第三步
app-routing.module.ts
路由配置
此处定义了默认路由(懒加载方式)
值得一提的是：ionic在创建pages时，会自动在app.routing中添加路由配置。
const routes: Routes = [
{path: '', redirectTo: '/index', pathMatch: 'full'},
{path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'}
];
app配置(app.module)
首先看一下代码
@NgModule({
// 声明AppComponent
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
// 声明ngx-logger配置(可忽略)
LoggerModule.forRoot({
level: NgxLoggerLevel.DEBUG,
serverLogLevel: NgxLoggerLevel.DEBUG
}),
// IonicModule:其中包含ionic的组件等
IonicModule.forRoot(),
// IonicStorage(插件)
IonicStorageModule.forRoot(),
// 路由
AppRoutingModule,
// 网络请求
HttpClientModule
],
// 提供的服务 (插件部分必须在此引入)
providers: [
StatusBar,
SplashScreen,
Camera,
ImagePicker,
FileTransfer,
WebView,
{provide: ErrorHandler, useClass: GlobalErrorHandler},
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
],
bootstrap: [AppComponent]
})
# 可先忽略
export class AppModule {
static injector: Injector;
constructor(private injector: Injector) {
AppModule.injector = injector;
}
}
路由配置(app-routing)
const routes: Routes = [
{path: '', redirectTo: '/index', pathMatch: 'full'},
{path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'}
];
@NgModule({
providers: [SelectivePreLoading],
imports: [
RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading, useHash: true})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading, useHash: true})
查看定义，具体支持哪些配置
ExtraOptions
export interface ExtraOptions {
// 路由追踪 用于调试
enableTracing?: boolean;
// hash方式路由(如：#/index)
useHash?: boolean;
initialNavigation?: InitialNavigation;
errorHandler?: ErrorHandler;
// 预加载路由策略
preloadingStrategy?: any;
onSameUrlNavigation?: 'reload' | 'ignore';
scrollPositionRestoration?: 'disabled' | 'enabled' | 'top';
anchorScrolling?: 'disabled' | 'enabled';
scrollOffset?: [number, number] | (() => [number, number]);
paramsInheritanceStrategy?: 'emptyOnly' | 'always';
malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree;
relativeLinkResolution?: 'legacy' | 'corrected';
}
此处配置了路由预加载策略。
什么事路由预加载?
场景：
在A页面，点击按钮跳转B页面，此时如果我们在A页面就预先将B页面加载，即可提升一定的用户体验。
下一篇将详细介绍路由预加载策略。
