登录页 ↔ 注册页文字按钮互相跳转登录页 → 首页账号密码正确弹窗提示后跳转首页 → 登录页退出登录清空页面栈返回登录统一 UI输入框圆角、蓝色按钮、弹窗提示、表单非空校验第一步配置页面路由main_pages.json步骤 1配置路由文件 main_pages.json必须先做文件路径entry/src/main/resources/base/profile/main_pages.json所有页面必须在此注册否则跳转报错找不到页面打开entry/src/main/resources/base/profile/main_pages.json在 src 数组中添加三个页面路径代码如下配置说明数组第一个为应用默认启动页面登录页路径与页面文件名完全一致区分大小写不带.ets后缀步骤 2登录页面 Login.ets沿用你文档的 UI 样式 新增跳转注册引入路由router、弹窗AlertDialog保留原有输入框、清除按钮新增去注册文字跳转按钮登录成功弹窗后跳转首页第二步编写登录页面完整代码登录页界面预览-origin_id关键新增逻辑说明导入router实现页面跳转登录弹窗增加确认按钮回调点击后跳转首页底部蓝色文字按钮router.pushUrl跳注册页保留返回栈步骤 3注册页面 Register.ets同 UI 风格注册成功返回登录新建文件pages/Register.ets复用登录页输入框样式增加确认密码注册成功弹窗跳转回登录页第三步编写注册页面完整代码注册页跳转逻辑底部文字router.back()返回登录页销毁当前注册页面注册成功弹窗点击「去登录」pushUrl 重新打开登录页第四步编写接收参数的主页完整代码预览器预览点击“新用户注册”跳转“用户注册”页面完成注册点击跳转“登录”页面然后就可以登录账号跳转进去步骤 4登录首页 Home.ets退出登录返回登录页新建文件pages/Home.ets登录成功进入提供退出登录功能使用replaceUrl清空页面栈无法返回首页ps页面跳转 APIurl必须填写在main_pages.json里注册过的页面路径params页面之间传递数据的对象2.接收路由参数在onPageShow生命周期中执行每次打开页面都会获取参数const params router.getParams() as Recordstring,string3.双向绑定State装饰器定义变量配合TextInput的text和onChange完成双向数据绑定。4.弹窗 AlertDialog使用前必须在文件顶部导入模块步骤 5完整三方跳转流程梳理登录页 → 注册页点击底部蓝色文字「没有账号前往注册」→router.pushUrl(pages/Register)注册页 → 登录页 两种方式点击「已有账号返回登录」router.back()直接返回栈内登录页注册成功弹窗点击「去登录」router.pushUrl(pages/Login)新开登录页登录页 → 首页输入账号root、密码root登录弹窗点击「进入首页」跳转首页 → 登录页点击退出登录弹窗确认后router.replaceUrl跳转登录销毁首页常见报错解决1、点击按钮无法跳转页面检查main_pages.json是否注册当前页面检查url路径和文件名大小写、横杠完全一致确认代码写在.onClick()里面不能直接写在Columnrouter未定义在页面第一行添加路由导入import router from ohos.router;弹窗 AlertDialog 报错缺少对应模块导入补充import AlertDialog from ohos.alertDialog;4、Only UI component syntax can be written here路由代码写在了按钮外面必须包裹在onClick((){})回调函数内部。