Page Routing

NOTE

• The APIs of this module are no longer maintained since API version 8. You are advised to use @ohos.router instead.

• The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

import router from '@system.router';

router.push

push(options: RouterOptions): void

Navigates to a specified page in the application.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

// Current page
export default {
  pushPage() {
    router.push({
      uri: 'pages/routerpage2/routerpage2',
      params: {
        data1: 'message',
        data2: {
          data3: [123, 456, 789]
	},
      },
    });
  }
}

// routerpage2 page
export default {
  data: {
    data1: 'default',
    data2: {
      data3: [1, 2, 3]
    }
  },
  onInit() {
    console.info('showData1:' + this.data1);
    console.info('showData3:' + this.data2.data3);
  }
}

NOTE

The page routing stack supports a maximum of 32 pages.

router.replace

replace(options: RouterOptions): void

Replaces the current page with another one in the application and destroys the current page.

System capability: SystemCapability.ArkUI.ArkUI.Lite

Parameters

Example

// Current page
export default {
  replacePage() {
    router.replace({
      uri: 'pages/detail/detail',
      params: {
        data1: 'message',
      },
    });
  }
}

// detail page
export default {
  data: {
    data1: 'default'
  },
  onInit() {
    console.info('showData1:' + this.data1)
  }
}

router.back

back(options?: BackRouterOptions): void

Returns to the previous page or a specified page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

// index page
export default {    
  indexPushPage() {        
    router.push({            
      uri: 'pages/detail/detail',        
    });        
  }
}

// detail page
export default {    
  detailPushPage() {        
    router.push({            
      uri: 'pages/mall/mall',        
    });    
  }
}

// Navigate from the mall page to the detail page through router.back().
export default {    
  mallBackPage() {        
    router.back();    
  }
}

// Navigate from the detail page to the index page through router.back().
export default {    
  defaultBack() {        
    router.back();    
  }
}

// Return to the detail page through router.back().
export default {    
  backToDetail() {        
    router.back({uri:'pages/detail/detail'});    
  }
}

NOTE

In the example, the uri field indicates the page route, which is specified by the pages list in the config.json file.

router.getParams

getParams(): ParamsInterface

Obtains parameter information about the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

router.clear

clear(): void

Clears all historical pages in the stack and retains only the current page at the top of the stack.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

export default {    
  clearPage() {        
    router.clear();    
  }
}

router.getLength

getLength(): string

Obtains the number of pages in the current stack.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

export default {     
  getLength() {        
    var size = router.getLength();        
    console.log('pages stack size = ' + size);    
  }
}

router.getState

getState(): RouterState

Obtains state information about the current page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

export default {     
  getState() {        
    var page = router.getState();
    console.log('current index = ' + page.index);
    console.log('current name = ' + page.name);
    console.log('current path = ' + page.path);
  }
}

router.enableAlertBeforeBackPage⁶⁺

enableAlertBeforeBackPage(options: EnableAlertBeforeBackPageOptions): void

Enables the display of a confirm dialog box before returning to the previous page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

export default {    
  enableAlertBeforeBackPage() {        
    router.enableAlertBeforeBackPage({            
      message: 'Message Info',            
      success: function() {                
        console.log('success');            
      },            
      cancel: function() {                
        console.log('cancel');            
      },        
    });    
  }
}

router.disableAlertBeforeBackPage⁶⁺

disableAlertBeforeBackPage(options?: DisableAlertBeforeBackPageOptions): void

Disables the display of a confirm dialog box before returning to the previous page.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Example

export default {    
  disableAlertBeforeBackPage() {        
    router.disableAlertBeforeBackPage({            
      success: function() {                
        console.log('success');            
      },            
      cancel: function() {                
        console.log('cancel');            
      },        
    });    
  }
}

RouterOptions

Defines the page routing parameters.

System capability: SystemCapability.ArkUI.ArkUI.Lite

BackRouterOptions

Defines the parameters for routing back.

System capability: The items in the table below require different system capabilities. For details, see the table.

RouterState

Defines the page state.

System capability: SystemCapability.ArkUI.ArkUI.Full

EnableAlertBeforeBackPageOptions⁶⁺

Defines the EnableAlertBeforeBackPage parameters.

System capability: SystemCapability.ArkUI.ArkUI.Full

DisableAlertBeforeBackPageOptions⁶⁺

Define the DisableAlertBeforeBackPage parameters.

System capability: SystemCapability.ArkUI.ArkUI.Full

ParamsInterface