鸿蒙 HarmonyOS Next 路由 不废话 全干货
一、页面的创建（1）直接通过创建一个新的Page的方式创建
https://i-blog.csdnimg.cn/direct/ba90e286a55847258a019eac2e6c4d6f.png
（2）先创建一个 ArkTs File文件，然后在resources/base/profile/main_pages.json中加上页面临应的src路径，下面的Index_3.ets文件是通过创建ArkTs File文件生成的，必要加上src路径
https://i-blog.csdnimg.cn/direct/fb4a5aae741741d3b79c7ec733fb008f.png
加上路径后的显示：
https://i-blog.csdnimg.cn/direct/24a8870cb4d84e61a19d917b1b1d091d.png
二、路由 - 操纵
首先导入：
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 ParamsObj
console.log('我的用户名是'+params.username)
}
build(){
Column() {
Text('第三个页面')
.fontSize(50)
}
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]