鸿蒙 HarmonyOS Next 路由 不废话 全干货

一、页面的创建

（1）直接通过创建一个新的Page的方式创建

（2）先创建一个 ArkTs File文件，然后在resources/base/profile/main_pages.json中加上页面临应的src路径，下面的Index_3.ets文件是通过创建ArkTs File文件生成的，必要加上src路径

加上路径后的显示：
 

二、路由 - 操纵

首先导入：

1. import router from '@ohos.router';

复制代码

普通跳转（可以返回）

相当于栈，可以每次跳转都是入栈，每次返回都是出栈，页面栈的最大容量是32个页面
提示：页面地址是resources/base/profile/main_pages.json里的src地址

1. router.pushUrl({
2.         url:'页面地址'
3. })

复制代码

替换跳转（无法返回）

提示：页面地址是resources/base/profile/main_pages.json里的src地址

1. router.replaceUrl({
2.         url:'页面地址'
3. })

复制代码

返回

1. router.back()

复制代码

获取页面栈的长度

1. router.getLength()

复制代码

清空页面栈 

1. router.clear()

复制代码

三、路由模式

两种路由模式：

Standard：无论之前是否使用过，一直添加到页面栈中（默认）
Single：如果目的页面已存在，会将已有的最近同url页面移到栈顶

路由模式的设置方式

在挑衅页面的第二个参数设置路由模式
router.pushUrl(options,mode)
示例：
  

1. router.pushUrl({
2.   url:'pages/Index_2'
3. },router.RouterMode.Single)

复制代码

四、路由传参

传递参数的示例：
  

1. router.pushUrl({
2.   url:'pages/Index_3',
3.   params: {
4.     username:this.username
5.   }
6. })

复制代码

担当参数的示例：
  

1. aboutToAppear():void{
3.   console.log(JSON.stringify(router.getParams()))
4.   const params = router.getParams() as 类型
6.   //例如，获取params中的username属性
7.   console.log('我的用户名是'+params.username)
9. }

复制代码

五、demo演示

第一个页面：Index.ets （结果：跳转的到Index_2.ets页面）

1. import router from '@ohos.router'
3. @Entry
4. @Component
5. struct Index {
7.   build(){
8.     Column() {
9.       Text('第一个页面')
10.         .fontSize(50)
11.         .onClick(()=>{
12.           router.pushUrl({
13.             url:'pages/Index_2'
14.           },router.RouterMode.Single)
15.         })
17.     }
18.   }
19. }

复制代码

第二个页面：Index_2.ets（结果：跳转的到Index_3.ets页面，同时传递参数username）

1. import router from '@ohos.router';
3. @Entry
4. @Component
5. struct Index_2 {
6.   @State username:string = 'csh'
7.   build(){
8.     Column() {
9.       Text('第二个页面')
10.         .fontSize(50)
11.         .onClick(()=>{
12.           router.pushUrl({
13.             url:'pages/Index_3',
14.             params: {
15.               username:this.username
16.             }
17.           })
18.         })
19.     }
20.   }
21. }

复制代码

第三页面：Index_3.ets（结果：吸收Index_2.ets页面传递来的参数并通过日志输出）

1. import router from '@ohos.router';
3. interface ParamsObj{
4.   username:string
5. }
7. @Entry
8. @Component
9. struct Index_3 {
11.   aboutToAppear():void{
13.     console.log(JSON.stringify(router.getParams()))
14.     const params = router.getParams() as ParamsObj
15.     console.log('我的用户名是'+params.username)
17.   }
19.   build(){
20.     Column() {
21.       Text('第三个页面')
22.         .fontSize(50)
24.     }
25.   }
26. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。