1# Redirecting to a Specified Page Through the Router Event 2 3 4The **router** capability of the **postCardAction** API can be used in a widget to quickly start the widget provider application. An application can provide different buttons through the widget so that users can jump to different pages at the touch of a button. For example, a camera widget provides the buttons that direct the user to respective pages, such as the page for taking a photo and the page for recording a video. 5 6 7 8 9 10Generally, a button is used to start a page. 11 12 13- Design two buttons on the widget page. When one of the buttons is clicked, **postCardAction** is called to send a router event to the specified UIAbility, with the content to be transferred defined in the event. 14 15 ```ts 16 @Entry 17 @Component 18 struct WidgetCard { 19 build() { 20 Column() { 21 Button ('Function A') 22 .margin('20%') 23 .onClick(() => { 24 console.info('Jump to EntryAbility funA'); 25 postCardAction(this, { 26 'action': 'router', 27 'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed. 28 'params': { 29 'targetPage': 'funA' // Process the information in the EntryAbility. 30 } 31 }); 32 }) 33 34 Button ('Function B') 35 .margin('20%') 36 .onClick(() => { 37 console.info('Jump to EntryAbility funB'); 38 postCardAction(this, { 39 'action': 'router', 40 'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed. 41 'params': { 42 'targetPage': 'funB' // Process the information in the EntryAbility. 43 } 44 }); 45 }) 46 } 47 .width('100%') 48 .height('100%') 49 } 50 } 51 ``` 52 53- The UIAbility receives the router event and obtains parameters. It then starts the page specified in the received message. 54 55 ```ts 56 import UIAbility from '@ohos.app.ability.UIAbility'; 57 import window from '@ohos.window'; 58 59 let selectPage = ""; 60 let currentWindowStage = null; 61 62 export default class CameraAbility extends UIAbility { 63 // If the UIAbility is started for the first time, the onCreate lifecycle callback is triggered after the router event is received. 64 onCreate(want, launchParam) { 65 // Obtain the targetPage parameter passed in the router event. 66 console.info("onCreate want:" + JSON.stringify(want)); 67 if (want.parameters.params !== undefined) { 68 let params = JSON.parse(want.parameters.params); 69 console.info("onCreate router targetPage:" + params.targetPage); 70 selectPage = params.targetPage; 71 } 72 } 73 // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received. 74 onNewWant(want, launchParam) { 75 console.info("onNewWant want:" + JSON.stringify(want)); 76 if (want.parameters.params !== undefined) { 77 let params = JSON.parse(want.parameters.params); 78 console.info("onNewWant router targetPage:" + params.targetPage); 79 selectPage = params.targetPage; 80 } 81 if (currentWindowStage != null) { 82 this.onWindowStageCreate(currentWindowStage); 83 } 84 } 85 86 onWindowStageCreate(windowStage: window.WindowStage) { 87 let targetPage; 88 // Start the page specified by targetPage. 89 switch (selectPage) { 90 case 'funA': 91 targetPage = 'pages/FunA'; 92 break; 93 case 'funB': 94 targetPage = 'pages/FunB'; 95 break; 96 default: 97 targetPage = 'pages/Index'; 98 } 99 if (currentWindowStage === null) { 100 currentWindowStage = windowStage; 101 } 102 windowStage.loadContent(targetPage, (err, data) => { 103 if (err && err.code) { 104 console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err)); 105 return; 106 } 107 }); 108 } 109 }; 110 ``` 111
