一、页面的创建
(1)直接通过创建一个新的Page的方式创建
(2)先创建一个 ArkTs File文件,然后在resources/base/profile/main_pages.json中加上页面对应的src路径,下面的Index_3.ets文件是通过创建ArkTs File文件生成的,需要加上src路径
加上路径后的显示:
二、路由 - 操作
首先导入:
import router from 'ohos.router'
普通跳转(可以返回)
相当于栈,可以每次跳转都是入栈,每次返回都是出栈,页面栈的最大容量是32个页面
提示:页面地址是resources/base/profile/main_pages.json里的src地址
router.pushUrl({url:'页面地址'
})
替换跳转(无法返回)
提示:页面地址是resources/base/profile/main_pages.json里的src地址
router.replaceUrl({url:'页面地址'
})
返回
router.back()
获取页面栈的长度
router.getLength()
清空页面栈
router.clear()
三、路由模式
两种路由模式:
Standard:无论之前是否使用过,一直添加到页面栈中(默认)
Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶
路由模式的设置方式
在挑战页面的第二个参数设置路由模式
router.pushUrl(options,mode)
示例:
router.pushUrl({url:'pages/Index_2' },router.RouterMode.Single)
四、路由传参
传递参数的示例:
router.pushUrl({url:'pages/Index_3',params: {username:this.username} })
接受参数的示例:
aboutToAppear():void{console.log(JSON.stringify(router.getParams()))const params = router.getParams() as 类型//例如,获取params中的username属性console.log('我的用户名是'+params.username)}
五、demo演示
第一个页面:Index.ets (效果:跳转的到Index_2.ets页面)
import router from '@ohos.router'@Entry
@Component
struct Index {build(){Column() {Text('第一个页面').fontSize(50).onClick(()=>{router.pushUrl({url:'pages/Index_2'},router.RouterMode.Single)})}}
}
第二个页面:Index_2.ets(效果:跳转的到Index_3.ets页面,同时传递参数username)
import router from '@ohos.router';@Entry
@Component
struct Index_2 {@State username:string = 'csh'build(){Column() {Text('第二个页面').fontSize(50).onClick(()=>{router.pushUrl({url:'pages/Index_3',params: {username:this.username}})})}}
}
第三页面:Index_3.ets(效果:接收Index_2.ets页面传递来的参数并通过日志输出)
import router from '@ohos.router';interface ParamsObj{username:string
}@Entry
@Component
struct Index_3 {aboutToAppear():void{console.log(JSON.stringify(router.getParams()))const params = router.getParams() as ParamsObjconsole.log('我的用户名是'+params.username)}build(){Column() {Text('第三个页面').fontSize(50)}}
}