关于Ionic3.x Deeplinks插件以及ionic路由导航 DeepLinker

一、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。

你可能感兴趣的:(关于Ionic3.x Deeplinks插件以及ionic路由导航 DeepLinker)