ionic3默认使用NavController实现页面跳转切换，且url不变。有时候我们需要直接用网址打开一个页面。
那么可以有两种方式，DeepLinker和懒加载。
Angular中懒加载的配置，需要在Routes中配置好loadchildern的对应的模块的相对路径，然后在子模块的路由中配置子模块中的路由映射。好处是模块化设计，模块的加载和卸载比较方便。
1、懒加载
ionic3中的懒加载是直接对Page进行设置，只需要简单3不就能完成，操作更加简单。
注意：这里之前被cnpm i坑到怀疑人生。node_module务必要使用npm i来进行安装。之前使用cnpm安装了依赖后，下面代码死活运行不成功。报错找不到模块。
image.png
第一步：page1.ts中添加ionicpage装饰器
//@IonicPage()//默认name："Page1Page"，segment："page1"
@IonicPage({
name: "mypage1",
segment: 'detail/:id'
})
第二步：page1.module.ts中添加entryComponents的配置
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Page1Page } from './page1';
@NgModule({
declarations: [
Page1Page,
],
imports: [
IonicPageModule.forChild(Page1Page),
],
entryComponents: [
Page1Page
]
})
export class Page1PageModule { }
第三步：调用
GO() {
this.navCtrl.push("mypage1", { id: 100 });
}
那么在前台点击按钮，调用GO方法的时候，就会打开http://localhost:8100/#/detail/100。直接打开这个网址，也会打开这个页面。这样就实现了懒加载。
官方教程：https://ionicframework.com/docs/api/navigation/IonicPage/
2、DeepLink
使用DeepLink会比较麻烦，每次需要给页面配置网址，需要在app.module.ts中添加一条记录。
实现跳转到指定Tab
修改app.module.ts文件，将IonicModule.forRoot方法改为如下代码：
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]
})
这里的意思是，给Tabs页传一个参数，如http://examplesite/#/tabs/1，这样就让App直接跳到第二个Tab。
修改tabs.ts文件，改为如下代码：
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
public tabId: number;
public selectTabIndex: number;
constructor(public params: NavParams) {
this.tabId = params.get("tabId");
if(this.tabId != undefined || this.tabId !=null)
{
this.selectTabIndex = this.tabId;
}
}
}
添加了两个变量，然后通过NavParams取得传递过来的参数并赋值给selectTabIndex。
修改tabs.html，给Tabs组件添加一个绑定：
<ion-tabs selectedIndex={{selectTabIndex}}>
运行ionic serve命令，会自动打开http://localhost:8100/地址，现在打开一个新窗口，输入http://localhost:8100/#/tabs/1，OK，直接跳到第二个Tab了。
默认历史
还有一种情况，如果从其他页面直接导航到内部的页面，当点击返回的时候，该返回哪个页面呢？比如从推送通知进到新闻详情页面，当点击返回的时候，应该返回首页。所以Ionic2提供了defaultHistory参数，如果页面历史堆栈中不存在历史页面的时候，就会返回到这个页面。用法如下：
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]
网友评论