#夏日挑战赛#ArkUI路由跳转原创精华

早起睡不够

发布于 2022-7-13 17:33

浏览

1收藏

已被收录在 2 个专栏，

首先我们来看Navigator组件

Navigator组件用于跳转到App内的其它页面。

新建一个router.ets页面，初始代码如下：

@Entry
@Component
struct Router {
  @State message: string = '这里是坚果小课堂'


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
         

        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

接下来，我们就来看一下如何挑战到这个页面。

只需要用Navigator组件包裹就可以，

 (value?: { target: string; type?: NavigationType }): NavigatorAttribute;
1.

然后我们看一下需要传的参数有哪些，概括起来就是：

 /**
       * 接口:Navigator(value?: {target: string, type?: NavigationType})
       *    target:string 指定跳转目标页面的路径。
       *    type:NavigationType 默认值Push 指定路由方式。
       *        NavigationType.Push 跳转到应用内的指定页面。
       *        NavigationType.Replace 用应用内的某个页面替换当前页面，并销毁被替换的页面。
       *        NavigationType.Back 返回上一页面或指定的页面。
       */
1.
2.
3.
4.
5.
6.
7.
8.

下面是完整的代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Navigator({ target: "common/router"}) {

          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)

        }
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

好的，上面的这种方式到这就结束了，接下来，我们用第二种方式

页面路由router

使用router接口前需要导入模块，代码如下：

import router from '@system.router'
1.

然后使用

 router.push({ // 使用push模式
            uri:  "common/router", // 转向的目标页面
           
          });
1.
2.
3.
4.

就可以完成路由跳转，我们看一下push方法提供的两种参数，

转向的目标页面
要传递的参数

export interface RouterOptions {

  uri: string;

  params?: Object;
}

1.
2.
3.
4.
5.
6.
7.

我们利用通用事件onclick，绑定一个点击事件，下面的完整的代码，这次的区别在于，我们给目标页面传递一个参数，并且接受到它

这是完整代码

import router from '@system.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        //第一中跳转方式
        Navigator({ target: "common/router", type: NavigationType.Push }) {

          Text("第一种跳转方式")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)

        }
        Text("第二种跳转方式")
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
          router.push({ // 使用push模式
            uri:  "common/router", // 转向的目标页面
            params: { // 同时传参
              data: '上一个页面的数据',
            },
          });
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

那么我们既然把数据已经传递过去了，如何接受呢？这又是一个很重要的知识点。

router.getParams()接收上一个页面传递的参数 @State info: string = router.getParams()

这里需要注意的router.getParams()后面的参数要和前面的一致。

// @ts-nocheck

import router from '@system.router'
@Entry
@Component
struct Router {
  @State message: string = '这里是坚果小课堂';

  // 通过router接收上一个页面传递的参数
  @State info: string = router.getParams().data;
  build() {

    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{


        })
        Text(this.info)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
router.back();

        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

#夏日挑战赛#ArkUI路由跳转-鸿蒙开发者社区

我们如果要返回上一级页面该如何做呢，我继续教大家

router.back();
1.

好的极简入门到这就完成了，

最后介绍2个组件

Hyperlink组件

interface HyperlinkInterface {
  /**
   * Return to get Hyperlink.
   * adress: Web page redirected by the hyperlink component.
   * content: Hyperlinks in the hyperlink component display text.
   * @since 7
   */
  (address: string | Resource, content?: string | Resource): HyperlinkAttribute;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

其中接口参数"address"对标"href"，可选参数content对标"title"。

示例代码如下：

      /**
       * 接口:Hyperlink(address: string, content?: string)
       *    address: string hyperlink组件跳转的网页。
       *    content: string hyperlink组件中超链接显示文本。
       */
        Hyperlink('https://space.bilibili.com/480883651', ) {
        Text("坚果").fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.

用过之后发现可以跳转到指定网页。

#夏日挑战赛#ArkUI路由跳转-鸿蒙开发者社区

Web组件

提供具有网页显示能力的Web组件。访问在线网页时需添加网络权限：ohos.permission.INTERNET

  Web({ src:
        $rawfile("index.html"), controller: this.controller })
1.
2.

使用很简单

![image-20220713172404957](…/…/…/…/Library/Application Support/typora-user-images/image-20220713172404957.png)

好的，今天就是简单的路由跳转的两种方式，顺便了解了一下Hyperlink组件和Web组件

都是最简单的一个入门，

参考文档

分类

标签

2条回复

按时间正序

按时间倒序

早起睡不够

由于是最简单的一个入门，所以里面的东西没有写，有需要的可以评论一下，后面更新

2022-7-13 17:39:50

鸿蒙坚果

感谢分享，这波必须点赞

2022-7-14 08:34:13

51CTO

51CTO博客

51CTO学堂

#夏日挑战赛#ArkUI路由跳转原创精华

首先我们来看Navigator组件

页面路由router

最后介绍2个组件

Hyperlink组件

Web组件

参考文档

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#夏日挑战赛#ArkUI路由跳转 原创 精华

首先我们来看Navigator组件

页面路由router

最后介绍2个组件

Hyperlink组件

Web组件

参考文档

目录

订阅鸿蒙技术特刊，精选内容抢先看

#夏日挑战赛#ArkUI路由跳转原创精华