完整代码逐行详解ArkTS 鸿蒙页面路由跳转一、完整可运行代码整合两张截图补全缺失导入 / 装饰器// 导入错误类型 import { BusinessError } from ohos.base; // 导入路由模块 import router from ohos.router; // 页面入口装饰器标记为可独立访问的页面 Entry // 自定义组件装饰器 Component struct Index { // 响应式状态变量截图中存在本页面未使用 State message: string Hello World; build() { // 根布局垂直排列Column Column() { // 文本组件 Text(我是河软的学生) .fontSize(30) // 字号30 .fontColor(Color.Red) // 文字红色 // 按钮组件嵌套Text自定义按钮内文字样式 Button() { Text(返回) .fontSize(25) .fontWeight(FontWeight.Bold) // 文字加粗 .fontColor(Color.Blue) // 按钮内文字蓝色 } // 按钮样式属性 .type(ButtonType.Capsule) // 胶囊圆角按钮两端半圆 .margin({ top: 20 }) // 按钮顶部外边距20和上方文本拉开距离 .backgroundColor(#0D9FF8) // 按钮背景浅蓝色 .width(30%) // 宽度占屏幕30% .height(10%) // 高度占屏幕10% // 按钮点击事件 .onClick(() { console.info(Successful clicked button); // 1. 获取当前页面UI上下文 let uiContext: UIContext this.getUIContext(); // 2. 从上下文获取路由实例 let router uiContext.getRouter(); // 3. 页面入栈跳转 router.pushUrl({ url: pages/Index }) .then(() { // 跳转成功回调 console.info(Succeeded in jumping to the Index page.); }) .catch((err: BusinessError) { // 跳转失败捕获异常打印错误码与信息 console.error(Failed to jump to the Index page. Code is ${err.code},message is ${err.message}); }); }) } // 根布局铺满全屏 .width(100%) .height(100%) // 垂直方向居中所有子组件 .justifyContent(FlexAlign.Center) } }二、分模块详细拆解1. 头部导入与装饰器import { BusinessError } from ohos.base; import router from ohos.router; Entry Component struct Index { State message: string Hello World;导入语句BusinessError路由跳转失败时的统一错误对象用于捕获异常信息router系统路由模块负责页面之间的跳转。装饰器Entry标识当前文件是独立页面编译后可通过路由地址访问缺少该装饰器会直接预览报错Component声明这是一个自定义 ArkUI 组件必须搭配build()方法渲染 UIState 变量State message响应式状态变量变量修改会自动刷新页面 UI本页面代码未使用该变量是模板自带预留代码。2. 根布局 Column垂直弹性布局Column(){ // 内部Text、Button组件 } .width(100%) .height(100%) .justifyContent(FlexAlign.Center)Column垂直布局容器内部所有组件从上到下依次排列.width(100%) .height(100%)让布局占满手机整个屏幕.justifyContent(FlexAlign.Center)垂直方向居中文本 按钮整体在屏幕中间显示对应右侧预览效果。3. Text 文本组件Text(我是河软的学生) .fontSize(30) .fontColor(Color.Red)Text(内容)基础文字展示组件.fontSize(30)设置文字字号为 30.fontColor(Color.Red)文字颜色设为红色。4. Button 按钮嵌套自定义文字样式Button(){ Text(返回) .fontSize(25) .fontWeight(FontWeight.Bold) .fontColor(Color.Blue) } .type(ButtonType.Capsule) .margin({ top:20 }) .backgroundColor(#0D9FF8) .width(30%) .height(10%)嵌套 Text 写法优势普通Button(返回)无法单独控制文字粗细、字号Button{ Text() }可以自由定制按钮内部文字样式。.fontSize(25)按钮内文字大小 25.fontWeight(FontWeight.Bold)文字加粗.fontColor(Color.Blue)按钮内文字蓝色。按钮外观属性.type(ButtonType.Capsule)胶囊按钮左右两端完全圆角.margin({top:20})按钮距离上方文本顶部外边距 20.backgroundColor(#0D9FF8)按钮背景浅蓝色.width(30%)按钮宽度为屏幕宽度 30%.height(10%)高度为屏幕高度 10%。5. onClick 点击事件 页面路由跳转核心功能.onClick((){ console.info(Successful clicked button); let uiContext: UIContext this.getUIContext(); let router uiContext.getRouter(); router.pushUrl({ url: pages/Index }) .then(() { console.info(Succeeded in jumping to the Index page.); }) .catch((err: BusinessError) { console.error(Failed to jump to the Index page. Code is ${err.code},message is ${err.message}); }); })逐行逻辑console.info()控制台打印普通日志用于调试点击按钮后在日志窗口可见this.getUIContext()获取当前页面 UI 上下文是新版 HarmonyOS 推荐的路由获取方式uiContext.getRouter()从上下文拿到路由管理器控制页面跳转router.pushUrl({url:pages/Index})pushUrl入栈跳转新页面压入路由栈可通过返回键回到当前 second 页面url目标页面路径对应项目pages/Index.ets首页.then()Promise 成功回调跳转完成后打印成功日志.catch()捕获跳转异常页面不存在、路径写错等打印错误码与错误描述方便排错。三、页面运行效果全屏白色背景红色文字「我是河软的学生」、浅蓝色胶囊按钮垂直居中按钮内蓝色加粗 “返回” 文字按钮和上方文字间隔 20 像素点击按钮跳转到pages/Index首页控制台输出成功日志若路径写错 / Index 页面不存在控制台打印红色错误日志。四、预览报错提示截图右上角可能发生了预览错误常见报错原因缺少导入语句漏写import router from ohos.router或BusinessError导入路由路径错误目标页面pages/Index不存在或路径大小写不匹配缺少装饰器漏写Entry/Component预览器缓存关闭预览窗口重新打开或重启 DevEco Studio。补充知识点两种跳转 API 区别pushUrl()入栈跳转保留当前页面栈可返回本代码使用replaceUrl()替换当前页面销毁 second 页面无法返回。