企业官网建设流程全解析

智能建站技术,北京注册公司虚拟地址,站外推广策划书,员工管理网站模板页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块#xff0c;通过不同的url地址#xff0c;可以方便地进行页面路由#xff0c;轻松地访问不同的页面。包的使用及引用import router from ohos.router1.pushUrl-压栈跳转pushUrl(options:…页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块通过不同的url地址可以方便地进行页面路由轻松地访问不同的页面。包的使用及引用import router from ohos.router1.pushUrl-压栈跳转pushUrl(options: RouterOptions): Promisevoid场景 如果我们从列表页跳转到详情页查看详情点击返回还要继续查看列表页可以使用pushUrl打开详情页的同时保留了列表页在栈中。接下来测试一下1建立两个PageHmList和HmDetail如图所示。2实现HmList的布局代码如下。classListItemInfo{title:stringid:number0}EntryComponentstructHmList{Statelist:ListItemInfo[]Array.from(Array(100),(_:number,index:number){return{title:我是第${index 1}个,id:index1}asListItemInfo})build(){Column({space:20}){Row(){Text(列表数据).textAlign(TextAlign.Center).width(100%).height(40)}.border({color:#f3f4f5,width:{bottom:1}})List({space:10}){ForEach(this.list,(item:ListItemInfo){ListItem(){Row(){Text(item.title)Button(查看详情).height(30)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left:10,right:10})}})}}}}实现效果如图所示。3实现HmDetail布局代码如下EntryComponentstructHmDetail{build(){Column(){Row(){Text(详情页).width(100%).textAlign(TextAlign.Center)}.height(40).border({color:#f3f4f5,width:{bottom:1}})Column(){Text(详情页).fontSize(50)}.layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}}实现效果如图所示。4在HmList中导入router包完成路由跳转importrouterfromohos.routerButton(查看详情).onClick(() {router.pushUrl({ url: pages/HmDetail })})完整代码如下importrouterfromohos.routerclassListItemInfo{title:stringid:number0}EntryComponentstructHmList{Statelist:ListItemInfo[]Array.from(Array(100),(_:number,index:number){return{title:我是第${index 1}个,id:index1}asListItemInfo})build(){Column({space:20}){Row(){Text(列表数据).textAlign(TextAlign.Center).width(100%).height(40)}.border({color:#f3f4f5,width:{bottom:1}})List({space:10}){ForEach(this.list,(item:ListItemInfo){ListItem(){Row(){Text(item.title)Button(查看详情).onClick((){router.pushUrl({url:pages/HmDetail})}).height(30)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left:10,right:10})}})}}}}2.replaceUrl-替换跳转有一个登录页Login和一个个人中心页Profile希望从登录页成功登录后跳转到个人中心页。同时销毁登录页在返回时直接退出应用。此时直接replaceUrl方法会在跳转的同时销毁登录页在上面的例子中直接将pushUrl换成replaceUrl即可。import router from ohos.router;Button(查看详情).onClick(() {router.replaceUrl({ url: pages/HmDetail })})})总结1当你需要跳转之后还可以回到上一个页面使用pushUrl它会保留当前的页面压一个新的页面2当你跳转之后上一个页面的任务已经完成不需要返回就可以使用replaceUrl3.back返回router.back() . 返回上一个页面此时不需要参数如果说你想要返回的时候带一些参数需要params和url- 想要指定url.1router.back()在详情页加一个返回按钮点击按钮调用router.back()。importrouterfromohos.routerButton(返回列表页).onClick(() {router.back()})添加一个返回按钮完整代码如下importrouterfromohos.routerEntryComponentstructHmDetail{build(){Column(){Row(){Text(详情页).width(100%).textAlign(TextAlign.Center)}.height(40).border({color:#f3f4f5,width:{bottom:1}})Column(){Text(详情页).fontSize(50)Button(返回列表页).onClick((){router.back()})}.layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}}实现效果如图所示。4.路由参数如果需要在跳转时传递一些数据给目标页比如列表页到详情页想把id传过去就可以使用路由传参的模式。1修改HmList.ets文件代码如下Button(查看详情).onClick((){router.pushUrl({url:pages/HmDetail,params:{id:item.id}})})2修改HmDetail.ets文件子组件接收参数代码如下importrouterfromohos.routerclassRouterParams{id:number0}EntryComponentstructHmDetail{StatedetailId:number0aboutToAppear(){constparamsrouter.getParams()asRouterParamsif(params?.id){this.detailIdparams?.id}}build(){Column(){Row(){Text(详情页).width(100%).textAlign(TextAlign.Center)}.height(40).border({color:#f3f4f5,width:{bottom:1}})Column(){Text(详情页this.detailId).fontSize(50)Button(返回列表页).onClick((){router.back()})}.layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}}实现效果如图所示。router.back() 同样可以传递参数给上一级的路由上一级路由应该在onPageShow里面接收详情页面返回传参。1HmDetail.ets文件详情组件添加“返回列表页带参数”按钮代码如下Button(返回列表页带参数).onClick(() {router.back({url: pages/HmList,params: {backId: this.detailId}})})2父组件接受参数HmList.ets文件代码如下class BackRouterParams {backId: number 0}onPageShow() {const params router.getParams() as BackRouterParamsif(params?.backId) {AlertDialog.show({message: params.backId.toString()})}}完整代码如下importrouterfromohos.routerclassListItemInfo{title:stringid:number0}classBackRouterParams{backId:number0}EntryComponentstructHmList{Statelist:ListItemInfo[]Array.from(Array(100),(_:number,index:number){return{title:我是第${index 1}个,id:index1}asListItemInfo})onPageShow(){constparamsrouter.getParams()asBackRouterParamsif(params?.backId){AlertDialog.show({message:params.backId.toString()})}}build(){Column({space:20}){Row(){Text(列表数据).textAlign(TextAlign.Center).width(100%).height(40)}.border({color:#f3f4f5,width:{bottom:1}})List({space:10}){ForEach(this.list,(item:ListItemInfo){ListItem(){Row(){Text(item.title)Button(查看详情).onClick((){// router.pushUrl({ url: pages/HmDetail })// router.replaceUrl({ url: pages/HmDetail })router.pushUrl({url:pages/HmDetail,params:{id:item.id}})}).height(30)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left:10,right:10})}})}}}}实现效果如图所示。-总结1传参用params对象里面可以传任意内容key/value由开发者自己定义。2接收端采用router.getParams()获取对象需要通过class来定义参数的结构接收之后通过类型断言as指定为具体类型。3如果是通过pushUrl的方式跳转的返回上一个页面时aboutToAppear不会执行需要使用onPageShow来监听当前页面的显示钩子函数。5.路由模式Standard标准实例模式也是默认情况下的实例模式。每次调用该方法都会新建一个目标页并压入栈顶。Single单实例模式。即如果目标页的url在页面栈中已经存在同url页面则离栈顶最近的同url页面会被移动到栈顶并重新加载如果目标页的url在页面栈中不存在同url页面则按照标准模式跳转。简单理解一下就是1Standard-只要push页面栈里面就会加一项不管之前加没加过。2Single- 之前加过不会加新的页面会把之前加过的页面加出来。测试- 在detail页面再push到list页分别使用单例模式和标准模式测试。Button(标准模式).onClick(() {router.pushUrl({url: pages/HmList})})Button(单例模式).onClick(() {router.pushUrl({url: pages/HmList}, router.RouterMode.Single)})这里会发现 使用single模式路由返回时的list已经不存在了因为单例模式只要存在不会再压栈。HmDetail.ets文件完整代码如下importrouterfromohos.routerclassRouterParams{id:number0}EntryComponentstructHmDetail{StatedetailId:number0aboutToAppear(){constparamsrouter.getParams()asRouterParamsif(params?.id){this.detailIdparams?.id}}build(){Column(){Row(){Text(详情页).width(100%).textAlign(TextAlign.Center)}.height(40).border({color:#f3f4f5,width:{bottom:1}})Column(){Text(详情页this.detailId).fontSize(50)Button(返回列表页).onClick((){router.back()})Button(返回列表页带参数).onClick((){router.back({url:pages/HmList,params:{backId:this.detailId}})})Button(标准模式).onClick((){router.pushUrl({url:pages/HmList})})Button(单例模式).onClick((){router.pushUrl({url:pages/HmList},router.RouterMode.Single)})}.layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}}实现效果如图所示。欢迎加入课程班级考取鸿蒙认证https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type1?ha_sourcehmosclassha_sourceId89000248