一、Deeplinks插件
官网的介绍:
This plugin handles deeplinks on iOS and Android for both custom URL scheme links and Universal App Links.
我的理解:专门处理iOS和Android的自定义路由及通用应用程序路由的一个插件。
参考:https://github.com/ionic-team/ionic-plugin-deeplinks
支持 iOS 、 Android 、 Browser
Usage
ionic:在app.components.ts中使用,需先在app.module.ts中作为provider引用。
import { Deeplinks } from '@ionic-native/deeplinks';
constructor(private deeplinks: Deeplinks){ }
this.deeplinks.routeWithNavController(this.navController, {
'/about-us': AboutPage, '/products/:productId': ProductPage
}).subscribe(match => {
// match.$route - the route we matched, which is the matched entry from the arguments to route() // match.$args - the args passed in the link // match.$link - the full link data console.log('Successfully matched route', match);
}, nomatch => {
// nomatch.$link - the full link data
console.error('Got a deeplink that didn\'t match', nomatch);
});
二、路由导航 DeepLinker
页面跳转时,而地址栏的路由没有及时切换,并且当在一个列表页面或者详情页面刷新时,路由不能跳转到首页的问题,Ionic3提供了一种类似路由的DeepLinker功能,可以实现。
DeepLinker与NavController一起工作,但是用户基本不会直接与这个东西打交道。只有用户需要对URL进行处理的时候才需要配置这个。使用DeepLinker后,如果NavController push了一个新的页面,DeepLinker会在配置中寻找匹配的URL设置并更新URL。
基本用法
DeepLinker是在IonicModule.forRoot方法中使用,作为第三个参数:
imports: [ IonicModule.forRoot(MyApp, {}, { links: []})]
数组里的对象是DeepLinkerConfig,配置了URL和页面的匹配关系,一般来说是这样子的:
imports: [ IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]
配置这个参数后,页面跳转就可以使用这里的name,如:
this.navCtrl.push('Home');
备注:目前我只解决页面跳转而地址栏的路由没有及时切换,并且当在一个列表页面或者详情页面刷新时,路由不能跳转到首页的问题,这个功能还可以添加参数及跳转到指定的tab。