今天的这一节，我们来看一下路由跳转，目前有两种方式
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%') }}
复制代码
我们如果要返回上一级页面该如何做呢，我继续教大家
好的极简入门到这就完成了，
最后介绍 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 组件
都是最简单的一个入门，
参考文档
评论