HarmonyOS 路由与导航

import router from '@ohos.router'
 
// 跳转到新页面
router.pushUrl({
 url: 'pages/DetailPage',
 params: { id: '123', name: '商品详情' }
})
 
// 替换当前页面（不可返回）
router.replaceUrl({
 url: 'pages/LoginPage',
 params: { from: 'home' }
})
 
// 返回上一页
router.back()
router.back({ url: 'pages/HomePage' }) // 返回到指定页面
 
// 获取路由参数
const params = router.getParams() as Record<string, Object>
const id = params?.['id'] as string
 
// 清除所有页面记录并跳转（适用于登录后跳主页）
router.clear()
 
// 跳转前判断
router.enableAlertBeforeBackPage({ message: '确定要离开吗？' })

@Entry
@Component
struct MainPage {
 @Provide('navPathStack') pathStack: NavPathStack = new NavPathStack()
 
 build() {
 Navigation(this.pathStack) {
 Column() {
 Text('首页内容')
 Button('去详情').onClick(() => {
 this.pathStack.pushPath({ name: 'DetailPage', param: { id: '123' } })
 })
 }
 }
 .title('主页')
 .navBarHidden(false)
 .mode(NavigationMode.Stack)
 }
}

// 在页面路由配置中注册
// main_pages.json 或 NavPathMap 中配置映射
 
@Builder
function DetailPageBuilder(name: string, param: Object) {
 DetailPage()
}
 
@Component
struct DetailPage {
 @Consume('navPathStack') pathStack: NavPathStack
 @State detailData: DetailInfo = new DetailInfo()
 
 aboutToAppear() {
 const param = this.pathStack.getParamByName('DetailPage') as Record<string, Object>
 const id = param?.['id'] as string
 this.loadDetail(id)
 }
 
 build() {
 NavDestination() {
 Column() {
 Text('详情页内容')
 Button('返回').onClick(() => {
 this.pathStack.pop()
 })
 }
 }
 .title('详情')
 .hideBackButton(false)
 .onShown(() => { console.info('DetailPage shown') })
 .onHidden(() => { console.info('DetailPage hidden') })
 }
}

// pushPath — 推入新路由
this.pathStack.pushPath({ name: 'DetailPage', param: { id: '123' } })
 
// pushPathByName — 按名称推入
this.pathStack.pushPathByName('SettingPage', { tab: 'account' })
 
// pop — 返回上一页
this.pathStack.pop()
 
// popToName — 返回到指定页面
this.pathStack.popToName('HomePage')
 
// popToIndex — 返回到指定索引
this.pathStack.popToIndex(1)
 
// clear — 清空路由栈
this.pathStack.clear()
 
// replacePath — 替换当前路由
this.pathStack.replacePath({ name: 'LoginPage' })
 
// getParent — 获取父页面参数
const parentParam = this.pathStack.getParent()
 
// getParamByName — 获取指定页面参数
const param = this.pathStack.getParamByName('DetailPage')
 
// getAllPathName — 获取所有路由名称
const names = this.pathStack.getAllPathName()
 
// size — 当前栈大小
const stackSize = this.pathStack.size()

// Navigation 级别配置
Navigation(this.pathStack) {
 // 内容
}
.navDestination(this.PageBuilder)
.customNavContentTransition((from: NavContentInfo, to: NavContentInfo) => {
 // 自定义转场动画
 return { transitionDuration: 300 }
})
 
// NavDestination 级别配置
NavDestination() {
 // 内容
}
.transition(TransitionEffect.OPACITY)

@Entry
@Component
struct MainTab {
 @State currentTab: number = 0
 
 @Builder
 TabBuilder(title: string, icon: Resource, index: number) {
 Column() {
 Image(icon).width(24).height(24)
 .fillColor(this.currentTab === index ? '#007DFF' : '#999999')
 Text(title).fontSize(12)
 .fontColor(this.currentTab === index ? '#007DFF' : '#999999')
 }
 }
 
 build() {
 Tabs({ barPosition: BarPosition.End, index: $this.currentTab }) {
 TabContent() { HomePage() }
 .tabBar(this.TabBuilder('首页', $r('app.media.home'), 0))
 
 TabContent() { CategoryPage() }
 .tabBar(this.TabBuilder('分类', $r('app.media.category'), 1))
 
 TabContent() { MessagePage() }
 .tabBar(this.TabBuilder('消息', $r('app.media.message'), 2))
 
 TabContent() { ProfilePage() }
 .tabBar(this.TabBuilder('我的', $r('app.media.profile'), 3))
 }
 .scrollable(false)
 .barMode(BarMode.Fixed)
 }
}

@Entry
@Component
struct DetailPage {
 // 页面生命周期回调
 aboutToAppear() {
 console.info('页面即将显示 — 初始化数据')
 this.loadData()
 }
 
 aboutToDisappear() {
 console.info('页面即将销毁 — 清理资源')
 }
 
 onPageShow() {
 console.info('页面每次显示时调用 — 包括从其他页面返回')
 }
 
 onPageHide() {
 console.info('页面每次隐藏时调用')
 }
 
 onBackPress(): boolean {
 console.info('返回键按下 — 返回 true 可拦截返回')
 if (this.hasUnsavedChanges) {
 this.showSaveDialog()
 return true // 拦截返回
 }
 return false // 允许返回
 }
 
 build() {
 Column() { Text('Detail Page') }
 }
}

@Component
struct MyComponent {
 aboutToAppear() {
 // 组件即将挂载 — 适合初始化
 }
 aboutToDisappear() {
 // 组件即将卸载 — 适合清理
 }
 onDidAppear() {
 // 组件已显示（API 12+）
 }
 onDidDisappear() {
 // 组件已隐藏（API 12+）
 }
 
 build() { Column() { Text('Component') } }
}

{
 ”src”: [
 ”pages/Index”,
 ”pages/HomePage”,
 ”pages/DetailPage”,
 ”pages/SettingPage”,
 ”pages/LoginPage”
 ]
}

// 在入口页面或全局配置中
@Builder
function PageBuilder(name: string, param: Object) {
 if (name === 'HomePage') {
 HomePage()
 } else if (name === 'DetailPage') {
 DetailPage()
 } else if (name === 'SettingPage') {
 SettingPage()
 }
}