Arouter: A Lightweight and Efficient Page Routing Tool

Arouter: A Lightweight and Efficient Page Routing Tool

by

Click the blue text ╳ to follow us

Open Source Project OpenHarmony
Is Everyone’s OpenHarmony

Introduction

Arouter is a lightweight and efficient page routing tool suitable for OpenAtom OpenHarmony (hereinafter referred to as “OpenHarmony”). Compared to native routing solutions, Arouter has more advantages. Traditional routing solutions use explicit and implicit intents for navigation, which can lead to some issues. Using explicit intents results in high coupling, while managing paths centrally with implicit intents can cause collaboration difficulties. Arouter adopts a custom routing scheme, navigating by parsing standard URLs, thereby avoiding direct dependencies. By using distributed management for page configurations, it resolves the issues associated with centralized path management, making the entire routing process more transparent and offering better scalability.
Arouter has lower coupling, better collaboration, and control interception capabilities compared to native routing solutions. It also uses distributed management for page configurations, providing better scalability. Currently, it supports SDK: OpenHarmony API Version 10.

Effect Diagram

Arouter: A Lightweight and Efficient Page Routing Tool

Usage Instructions

Arouter supports the following features:

● Supports routing navigation between pages;

● Supports parameterized navigation and callbacks;

● Supports configuring navigation interceptors;

● Supports pre-processing navigation;

Routing Navigation

1. Navigation without Parameters
Use Arouter.getInstance() to create a routing object, and use the chain call method build(”) to configure the target page for navigation, followed by the navigation() method to perform the navigation.
import {Arouter} from "@ohos/arouteronactivityresult";Arouter.getInstance()     .build("--/--")  // The address to navigate to     .navigation()
2. Parameterized Navigation
On the basis of navigation without parameters, configure parameters using withParams() before navigation.
import {Arouter} from "@ohos/arouteronactivityresult";Arouter.getInstance()     .build("--/--")  // The address to navigate to     .withParams({index:"--"})     .navigation()
3. Routing Callback
Routing callbacks need to work with the NavigationCallback interface. Implement the NavigationCallback interface in the page before routing.
import {NavigationCallback} from '@ohos/arouteronactivityresult'var callback:NavigationCallback = {     onInterrupt(postcard){},     onArrival(postcard){},     onActivityResult(data){}}
Then pass the callback to .navigationWithCallback() for navigation.
import {Arouter} from "@ohos/arouteronactivityresult";Arouter.getInstance()     .build("--")// The address to navigate to     .navigationWithCallback(callback)
In the onPageShow() lifecycle of the target page, call getPostcard() to obtain the specified postcard.
import router from '@ohos.router';if (postcard == null) {  postcard =  Arouter.getInstance().getPostcard(router.getState().path+router.getState().name);   }
Use postcard.getNavigationCallback() to call the corresponding callback method, and the method will be invoked in the source page.
postcard.getNavigationCallback().onActivityResult(params)

Routing Interception

1. Configuring Interceptors
In the process() method of the interceptor, implement page interception. Use interceptorCallback.onInterrupt() to interrupt navigation, and interceptorCallback.onContinue() to continue navigation.
import {Postcard,IInterceptor,InterceptorCallback} from '@ohos/arouteronactivityresult';var iInterceptor:IInterceptor= {    process(postcard:Postcard, interceptorCallback:InterceptorCallback) {        // Select the page to intercept, if the path is present during the navigation, prompt for interception; if not, navigate directly.        if (Postcard.getUri() == 'pages/transit') {            // Select the dialog box            AlertDialog.show(                {                    message: 'Intercepted, click to continue navigation',                    primaryButton: {                        value: 'Cancel',                        action: () => {                            // Interrupt navigation                         interceptorCallback.onInterrupt(postcard)                        }                    },                    secondaryButton: {                        value: 'Continue',                        action: () => {                            // Continue navigation                        interceptorCallback.onContinue(postcard);                        }                    },                }            )        } else {            // Continue navigation            interceptorCallback.onContinue(postcard);        }    }}
2. Registering Interceptors
import {registerInterceptor} from '@ohos/arouteronactivityresult';registerInterceptor(iInterceptor);
3. Removing Interceptors
import {unregisterInterceptor} from '@ohos/arouteronactivityresult';unregisterInterceptor()
4. Configuring Green Channel
Use .setGreenChannel() before navigation to skip interception (true: skip interception).
Arouter.getInstance()    .build("--/--")// The address to navigate to    .setGreenChannel(true)    .navigation()
5. Configuring Pre-processing Navigation
Pre-processing: Implement the onPretreatment method in the PretreatmentService interface, returning a Boolean value (true: continue navigation, false: do not navigate).
import {PretreatmentService} from '@ohos/arouteronactivityresult';var pretreatmentService:PretreatmentService = {  onPretreatment(postcard:Postcard):boolean{    return true  }}

Call the .setPretreatmentService() method before navigation to pass the pretreatmentService into the setPretreatmentService() method to complete the pre-processing functionality.

Arouter.getInstance()    .build(this.router)    .setPretreatmentService(pretreatmentService)    .navigationWithCallback(callback)

Interface Description

Arouter
Arouter: A Lightweight and Efficient Page Routing Tool
Callback Interface
Arouter: A Lightweight and Efficient Page Routing Tool

Installation and Download

ohpm install @ohos/arouteronactivityresult

Source Code Link

https://gitee.com/openharmony-tpc/arouter-api-onActivityResult

Leave a Comment