HarmonyOS学习笔记-路由 导航 页面跳转

// 1. 先在 main_pages 注册页面，然后使用一句代码即可
// 2. 页面跳转
router.pushUrl({url: "pages/SecondPage"}) // 传参时带上 params 值要是自定义类的对象，测试直接使用 string 无效
// 3. 页面返回
router.back(); 
router.back({url: 'pages/Home', params: {info: '来自Home页'}}); // 可返回指定页面，可携带返回参数

@Provide('pageInfos') pageStack: NavPathStack = new NavPathStack()

build(){
  Navigation(pageStack) {
    // 布局内容
    
  }
  .title(this.NavigationTitle) // 一个 @Build 函数的 UI
  //.title('NavIndex')
  .menus(this.NavigationMenus) // 一个 @Build 函数的 UI
  .titleMode(NavigationTitleMode.Full)
  .toolbarConfiguration([
    // tab
    {
      value: $r("app.string.navigation_toolbar_add"),
      icon: $r("app.media.ic_public_highlightsed")
    },
    {
      value: $r("app.string.navigation_toolbar_app"),
      icon: $r("app.media.ic_public_highlights")
    },
    {
      value: $r("app.string.navigation_toolbar_collect"),
      icon: $r("app.media.ic_public_highlights")
    },
  ])
  .hideTitleBar(false)
  .hideToolBar(false)
  .onTitleModeChange((titleModel: NavigationTitleMode) => {
    console.info('titleMode' + titleModel)
  })
}

  {
    "module" : {
      "routerMap": "$profile:router_map"
    }
  }

  {
    "routerMap": [
      {
        "name": "PageOne",
        "pageSourceFile": "src/main/ets/pages/PageOne.ets",
        "buildFunction": "PageOneBuilder",
        "data": {
          "description" : "this is PageOne"
        }
      }
    ]
  }

pathStack: NavPathStack = new NavPathStack()

build() {
  NavDestination() {
    //
  }.onRedy((context) => {
    this.pathStack = context.pathStack
  })
}

// 普通跳转，根据页面的 name 去跳转，并可以携带 param
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")

// 带返回回调的跳转
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
  console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});

// 带错误码的跳转
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
  console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
  console.error('Push destination succeed.');
});

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

@Builder
export function SecondPageBuilder(name: string, param: Object) {
  SecondPage({ name: name, param: param.toString() })
}

@Component
struct SecondPage {
  name: string = ""
  param: string = ""
  
  build () {
    // 
  }
}

// FirstPage
// 跳转
this.pathStack.pushPathByName("SecondPage", "我是来自 Index 页面的数据", (popInfo) => {
  // 这里处理返回数据
  const result = popInfo.result as Record<string, string>
  if(result) {
    this.result = result.result
    console.info(`++++++++++++${result.result}`)
  }
})

// SecondPage
// 获取
NavDestination() {
  Text("pathStack 获取参数：" + this.pathStack.getParamByName("SecondPage"))
}
.onBackPressed(() => {
  // 返回
  this.pathStack.pop({ result: "我是从 SecondPage 返回的数据" })
  return true // true 拦截返回键
}

this.pageStack.setInterception({
  willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
    operation: NavigationOperation, animated: boolean) => {
    if (typeof to === "string") {
      console.log("target page is navigation home page.");
      return;
    }
    // 将跳转到PageTwo的路由重定向到PageOne
    let target: NavDestinationContext = to as NavDestinationContext;
    if (target.pathInfo.name === 'PageTwo') {
      target.pathStack.pop();
      target.pathStack.pushPathByName('PageOne', null);
    }
  }
})

// Dialog NavDestination
@Entry
@Component
 struct Index {
   @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()

   @Builder
   PagesMap(name: string) {
     if (name == 'DialogPage') {
       DialogPage()
     }
   }

   build() {
     Navigation(this.pageStack) {
       Button('Push DialogPage')
         .margin(20)
         .width('80%')
         .onClick(() => {
           this.pageStack.pushPathByName('DialogPage', '');
         })
     }
     .mode(NavigationMode.Stack)
     .title('Main')
     .navDestination(this.PagesMap)
   }
 }

 @Component
 export struct DialogPage {
   @Consume('NavPathStack') pageStack: NavPathStack;

   build() {
     NavDestination() {
       Stack({ alignContent: Alignment.Center }) {
         Column() {
           Text("Dialog NavDestination")
             .fontSize(20)
             .margin({ bottom: 100 })
           Button("Close").onClick(() => {
             this.pageStack.pop()
           }).width('30%')
         }
         .justifyContent(FlexAlign.Center)
         .backgroundColor(Color.White)
         .borderRadius(10)
         .height('30%')
         .width('80%')
       }.height("100%").width('100%')
     }
     .backgroundColor('rgba(0,0,0,0.5)')
     .hideTitleBar(true)
     .mode(NavDestinationMode.DIALOG)
   }
 }