玩具网站建设服务公司,工程建设造价信息网站,广州免费景点,网站建设必学课程页面路由#xff08;router#xff09;是指在应用程序中实现不同页面之间的跳转和数据传递。
HarmonyOS 提供了 Router 模块#xff0c;通过不同的 url 地址#xff0c;可以方便地进行页面路由#xff0c;轻松地访问不同的页面。
类似这样的效果#xff1a; 页面跳转是…页面路由router是指在应用程序中实现不同页面之间的跳转和数据传递。
HarmonyOS 提供了 Router 模块通过不同的 url 地址可以方便地进行页面路由轻松地访问不同的页面。
类似这样的效果 页面跳转是开发过程中的一个重要组成部分。在使用应用程序时通常需要在不同的页面之间跳转有时还需要将数据从一个页面传递到另一个页面类似 Activity 跳转。
Router 模块提供了两种 跳转模式分别是 router.pushUrl() 和 router.replaceUrl()。
这两种模式决定了目标页是否会替换当前页。
跳转模式说明router.pushUrl()目标页不会替换当前页而是压入页面栈。这样可以保留当前页的状态并且可以通过返回键或者调用 router.back() 方法返回到当前页。router.replaceUrl()目标页会替换当前页并销毁当前页。这样可以释放当前页的资源并且无法返回到当前页。
Router 模块提供了两种 实例模式分别是 Standard 和 Single。
这两种模式决定了目标 url 是否会对应多个实例。
实例模式说明Standard标准实例模式也是默认情况下的实例模式。每次调用该方法都会新建一个目标页并压入栈顶。Single单实例模式。如果目标页的 url 在页面栈中已经存在同 url 页面则离栈顶最近的同 url 页面会被移动到栈顶并重新加载如果目标页的 url 在页面栈中不存在同 url 页面则按照标准模式跳转。
构建第一个界面
接下来我们实操一下首先创建一个功能默认的界面代码如下
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)}
}运行效果 在默认页面基础上我们添加一个 Button 组件作为按钮响应用户点击从而实现跳转到另一个页面。
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 20 }).backgroundColor(#0D9FFB).width(40%).height(5%)}.width(100%)}.height(100%)}
}运行效果 构建第二个界面
接下来创建第二个我们需要跳转的界面。
新建第二个页面文件。在“Project”窗口打开“entry src main ets ”右键点击“pages”文件夹选择“New ArkTS File”命名为“Second”点击“Finish”。 创建好 Second.ets 后需要 手动配置 好第二个界面的路由信息。
在“Project”窗口打开“entry src main resources base profile”在 main_pages.json 文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下 如果你仔细的话会发现上面我对手动配置加粗了其实创建新的界面还有更简洁的方法。
我们可以在右键点击“pages”文件夹时选择“New Page”这样的话就无需手动配置相关页面路由了比如我们再创建一个新的界面Third.ets。 你会发现 main_pages.json 会默认添加 Third 界面的路由
{src: [pages/Index,pages/Second,pages/Third]
}刚刚创建的 Second 页面没有任何代码我们添加相关文本并且我们也给它搞一个 Button。
预览效果 实现界面跳转
在使用页面路由 Router 相关功能之前我们需要在代码中先导入 Router 模块
import router from ohos.router;router.pushUrl()
import router from ohos.router // 导入页面路由模块Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 20 }).backgroundColor(#0D9FFB).width(40%).height(5%)// 跳转按钮绑定 onClick 事件点击时跳转到第二页.onClick(() {// 跳转到第二页router.pushUrl({ url: pages/Second })})}.width(100%)}.height(100%)}
}这样就可以实现页面的跳转了看下效果 router.back()
在第二个页面中我们可以给返回按钮绑定 onClick 事件点击按钮时返回到第一页。
import router from ohos.routerEntry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%).onClick(() {router.back() // 返回到第一页})}.width(100%)}.height(100%)}
}运行效果 router.replaceUrl
router.replaceUrl 主要用于目标页替换当前页并销毁当前页。比如有一个常用场景一个登录页Login和一个个人中心页希望从登录页成功登录后跳转到个人中心页。同时销毁登录页再返回时直接退出应用。
import router from ohos.routerEntry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 20 }).backgroundColor(#0D9FFB).width(40%).height(5%).onClick(() {// router.replaceUrl({ url: pages/Second })// replaceUrl 实现跳转后会销毁前一个页面router.replaceUrl({ url: pages/Second })})}.width(100%)}.height(100%)}
}运行效果 传递数据
如果需要在跳转时传递一些数据给目标页则可以在调用 Router 模块的方法时添加一个 params 属性并指定一个对象作为参数。例如 第一个页面 import router from ohos.routerclass DataModel {info: String;
}let paramsInfo: DataModel {info: 第一页传过来的数据
}Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 20 }).backgroundColor(#0D9FFB).width(40%).height(5%).onClick(() {router.pushUrl({url: pages/Second,params: paramsInfo})})}.width(100%)}.height(100%)}
}第二个页面 import router from ohos.routerconst params router.getParams(); // 获取传递过来的参数对象Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(params[info])Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%).onClick(() {router.back()})}.width(100%)}.height(100%)}
}运行效果 页面返回
返回上一个页面
上面我们其实已经看到了一个很简单的关于页面返回的例子调用 router.back() 即可。
router.back();返回到指定页面
另外我们还可以添加 url 参数指定返回的界面。
router.back({url: pages/Home
});比如现在工程里面还有一个 Third 的页面。
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {... ...Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}... ....onClick(() {router.pushUrl({url: pages/Second, // 跳转到第二个页面params: paramsInfo})})}.width(100%)}.height(100%)}
}Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {... ...Button() {Text(Next).fontSize(25).fontWeight(FontWeight.Bold)}... ....onClick(() {router.pushUrl({url: pages/Third // 跳转到第三个页面})})}.width(100%)}.height(100%)}
}Entry
Component
struct Third {State message: string Third Pagebuild() {Row() {Column() {... ...Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}... ....onClick(() {router.pushUrl({url: pages/Index. // 指定 Third 返回到首页 Index})})}.width(100%)}.height(100%)}
}带参数信息返回
同样的返回到指定页面也可以传递自定义参数信息。
router.back({url: pages/Home,params: {info: 来自Home页}
});在目标页中在需要获取参数的位置调用 router.getParams() 方法即可。
