Ionic2使用了近似原生App的页面导航方式，并不支持Angular2的路由。这种方式在开发本地App的时候比较方便，但如果要用来开发纯Web页面就有点问题了，这种情况下Angular2的router可以提供更灵活的配置。比如在首页是一个Tabs页面的情况下，如何控制用户看到的第一项Tab？默认情况下都是会导航到第一个Tab，而且地址栏的URL并不会跟随页面的切换而变化。好在Ionic2提供了一种类似路由的DeepLinker功能，可以实现以上目的。
DeepLinker与NavController一起工作，但是用户基本不会直接与这个东西打交道。只有用户需要对URL进行处理的时候才需要配置这个。使用DeepLinker后，如果NavController push了一个新的页面，DeepLinker会在配置中寻找匹配的URL设置并更新URL。
我们的需求场景是这样的，在微信公众号的菜单栏有n个菜单，点击不同的菜单，需要直接导航到我们页面对应的Tab上，而不是让用户再去选择Tab。下面说一下具体做法。
首先新建一个Ionic2项目。目前最新的CLI已经升级到了2.1.12，ionic-angular升级到了RC3，强烈建议更新。使用以下命令来创建一个Tabs模板的项目：
ionic start TabsDemo tabs --v2
默认会建立有三个Tab页的项目。主要有4个页面，一个Tabs是主页面，其他三个Tab页分别是home，about，contact。
基本用法
DeepLinker是在IonicModule.forRoot方法中使用，作为第三个参数：
imports: [
IonicModule.forRoot(MyApp, {}, {
links: []
})
]
数组里的对象是DeepLinkerConfig，配置了URL和页面的匹配关系，一般来说是这样子的：
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]
也就是说，当浏览HomePage这个页面的时候，URL会变成http://examplesite/#/home/home
传参
有的时候也需要从URL传递参数，可以用下面的形式：
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]
这样在DetailPage的ts文件中就可以接收user这个参数，进行处理。需要注意的是，这个参数应该是可以被DeepLinker序列化的，因此建议设置为一个string或number。
实现跳转到指定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] }
]
以上所述是小编给大家介绍的Ionic2系列之使用DeepLinker实现指定页面URL，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是Ionic2系列之使用DeepLinker实现指定页面URL。觉得自己今年真的脾气很大，一点不顺就很易燃易爆，看什么都是灰色的黑色的。各种关系搞得一塌糊涂，好像有很多不满，有很多仇恨。原来，我的头顶布满了乌云，我成了一个消极并且传播负能量的人了。想走，去一个完全陌生的地方，放下所有的爱与恨，情与伤，自己一个人，重新开始。更多关于Ionic2系列之使用DeepLinker实现指定页面URL请关注haodaima.com其它相关文章！