router route jump

Routing Mode

Routing provides two different jump modes, and different modes determine whether the page will create multiple instances.
Standard: Multi-instance mode, which is also the default jump mode. The target page is added to the top of the page stack, regardless of whether there is a page with the same URL.
Single: Single instance mode. If the URL of the target page already exists in the page stack, the page with the same URL closest to the top of the stack will be moved to the top of the stack, and the page will become a new page. If the URL of the target page does not exist in the page stack, it will jump according to the default multi-instance mode.
In short:
Standard: Regardless of whether it has been added before, it will always be added to the page stack [Common] [Default]
Single: If a page has been added before, the previously added page will be used [Use depending on the situation]

router.pushUrl(options, mode?)  // router.pushUrl(options, router.RouterMode.Standard)
router.replaceUrl(option, mode?)

Page jump and back

Normal jump (can return)

router.pushUrl({
 url: 'Page address'  // page/Index
})

Replace jump (cannot return)

router.replaceUrl({
    url: "Page address"
})

return

router.back()

Both router.pushUrl() and router.replaceUrl can jump to the page, the difference is: whether to replace the current page

router.pushUrl(): The target page will not replace the current page, but will be pushed into the page stack. This can preserve the state of the current page, and you can return to the current page by pressing the back key or calling the router.back() method
router.replaceUrl(): The target page will replace the current page and destroy the current page. This can release the resources of the current page, and you cannot return to the current page

Page Stack

The page stack is a data structure used to store program runtime pages, following the first-in-last-out principle

Router mode jump routing, the maximum capacity of the page stack is 32 pages

router.clear()  // Clear the page stack
router.getLength()  // Returns the current length of the page stack
router.getState()  // Get page status
 let page = router.getState()
 console.log("current Index = " + page.index)
 console.log("current name = " + page.name)
 console.log("current path = " + page.path)

parameter

pushUrl

router.pushUrl({
    url: "url string",
    params: {
        // Passing parameters as objects
    }
})

router.getParams() as object  // Receiving route parameters

replaceUrl

router.replaceUrl({
    url: "URL",
    params: {
        // Passing parameters as objects
    }
})

back

router.back({
 url: 'URL',
 params: {
  // Passing parameters as objects
 }  
// Parameters can be passed when back is returned, but generally no parameters are required for back
})

Cross-package jump in router mode

Navigation route jump — cross-package: hap -> hsp / hsp -> hsp

Navigation naturally supports cross-package jump

By path

Rule: @bundle:package name/module name/ets/pages/xx page // The prefix can be encapsulated into a constant: @bundle:package name

router.pushUrl({
    url: '@bundle:com.itheima.sz.new.content/home/ets/pages/Index'
})

By name (compared to the path method, it is more troublesome)

Modify the page to jump to @Entry \==> @Entry({routerName: ‘xxx’ })
Add dependencies, add the hsp module to jump to in oh-package.json
Import(“module name/path file”) in the page you want to jump to
router.pushNamedRoute

import { router } from '@kit.ArkUI';

import("home/src/main/ets/pages/Index")

@Entry
@Component
struct IndexPage {
  build() {
    RelativeContainer() {
      Button("Cross-package jump 1-path method")
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          router.pushUrl({
            url: `@bundle:com.itheima.sz.new.content/home/ets/pages/Index`
          })
          // Rule - @bundle:package name/module name/ets/pages/xxx page
        })
        .id("btn1")
      Button("Cross-package jump 2-name method")
        .alignRules({
          top: { anchor: 'btn1', align: VerticalAlign.Bottom },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({
          top: 20
        })
        .onClick(() => {
          // router.pushUrl({
          //   url: `@bundle:com.itheima.sz.new.content/home/ets/pages/Index`
          // })
          // Rule - @bundle:package name/module name/ets/pages/xxx page
          router.pushNamedRoute({
            name: 'homePage'
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}