写点什么

ArkUI 路由跳转概览

作者:坚果
  • 2022 年 7 月 13 日
  • 本文字数:2650 字

    阅读完需:约 9 分钟

今天的这一节,我们来看一下路由跳转,目前有两种方式


  • Navigator 组件

  • 页面路由接口 router


首先看一下目录结构


注意,使用这两种方式的时候,我们需要在 config.json 中配置一下,,否则,你会发现报这个错

 [manifest_router.cpp(GetPagePath)-(0)] [Engine Log] can't find this page <private> path
复制代码


 "pages": [          "pages/index",          "common/router"        ],
复制代码


做完这个准备,我们就开始今天的内容:

首先我们来看 Navigator 组件

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

新建一个 router.ets 页面,初始代码如下:


@Entry@Componentstruct Router {  @State message: string = '这里是坚果小课堂'  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold).onClick(()=>{                 })      }      .width('100%')    }    .height('100%')  }}
复制代码


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


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

 (value?: { target: string; type?: NavigationType }): NavigatorAttribute;
复制代码


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

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


下面是完整的代码


@Entry@Componentstruct 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%')  }}
复制代码

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

页面路由 router

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

import router from '@system.router'
复制代码


然后使用

 router.push({ // 使用push模式            uri:  "common/router", // 转向的目标页面                     });
复制代码

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

  • 转向的目标页面

  • 要传递的参数


export interface RouterOptions {  uri: string;  params?: Object;}
复制代码


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

这是完整代码

import router from '@system.router'@Entry@Componentstruct 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%')  }}
复制代码


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

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


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

// @ts-nocheckimport router from '@system.router'@Entry@Componentstruct 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%')  }}
复制代码



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


router.back();
复制代码

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

最后介绍 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;}
复制代码


其中接口参数"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)        }
复制代码

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



Web 组件

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

  Web({ src:        $rawfile("index.html"), controller: this.controller })
复制代码

使用很简单



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

都是最简单的一个入门,

参考文档

发布于: 刚刚阅读数: 3
用户头像

坚果

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“大前端之旅”,华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
ArkUI路由跳转概览_HarmonyOS_坚果_InfoQ写作社区