HarmonyOS应用开发—页面路由
页面路由
·
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5
路由简介：
普通用户：网址 开发人员：域名 =》延伸知识点 域名价格 65左右、域名后缀 com商业/cn中国/net网络供应商/edu教育/org非营利性/it意大利 鸿蒙里面：路由
路由/网址/域名组成
协议://域名:端口/路径?参数名=数据&...&参数名=数据 http://baidu.com:80/login?参数名=数据&...&参数名=数据
路径作用：显示不同的页面（布局结构不一样、数据都不同）
参数作用：显示不同的数据（布局结构一样、数据不同）
留 心：路径后面一般是参数，有n种方式，一般分为两种 传参1：协议://域名:端口/路径?参数名=值&....&参数名=值 【query传参/get方式传参】 传参2：协议://域名:端口/路径/参数1/.../参数n 【params传参】 http://baidu.com/user/12 /user/:id 定义路由的去规定了 http://baidu.com/user?id=1
1.1 路由配置
resource/base/profile/main_pages.json
{
"src": [
"pages/Index",
"pages/Cart",
"pages/Detail"
]
}
-
细节1：路由配置在json文件中 所以必须写 双引号，数组的最后一个不能写逗号
-
细节2：咱们后面写代码目录统一小写，组件名大写
1.2 页面跳转
页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。
Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页
router.pushUrl()
目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页
// 引入路由模块
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter1 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('跳转到页面2').onClick(() => {
router.pushUrl({
//
/**
* 目标url 和 src/main/resources/base/profile/main_pages.json
* 目录地址一致
*/
url: 'pages/LearnRouter2'
})
})
}
.width('100%')
}
.height('100%')
}
}
router.replaceUrl()
目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
// 引入路由模块
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter1 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('替换到页面2').onClick(() => {
router.replaceUrl({
//
/**
* 目标url 和 src/main/resources/base/profile/main_pages.json
* 目录地址一致
*/
url: 'pages/LearnRouter2'
})
})
}
.width('100%')
}
.height('100%')
}
}
1.3 路由传参
使用params对象传参
// 引入路由模块
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter1 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('替换到页面2').onClick(() => {
/**
* pushUrl接收第二个参数
* 跳转模式
*/
router.pushUrl({
//
/**
* 目标url 和 src/main/resources/base/profile/main_pages.json
* 目录地址一致
*/
url: 'pages/LearnRouter2',
// 使用params对象传参
params: {
name: "张三",
age: 20
}
// 标准实例模式
// }, router.RouterMode.Standard)
// 单例模式
}, router.RouterMode.Single)
})
}
.width('100%')
}
.height('100%')
}
}
接收参数
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter2 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('获取参数').onClick(() => {
const params = router.getParams()
console.log(JSON.stringify(params))
})
}
.width('100%')
}
.height('100%')
}
}
import router from '@ohos.router'
interface RouterParams {
content: string
}
@Entry
@Component
struct Other {
// created onLoad aboutToAppear
// mounted onReady
aboutToAppear() {
const parmas = router.getParams() as RouterParams
console.log(JSON.stringify(parmas))
console.log(parmas.content)
}
build() {
Column() {
Text('hello2')
Button('返回').onClick((event: ClickEvent) => {
router.showAlertBeforeBackPage({
message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容
});
router.back()
})
Button('获取参数').onClick((event: ClickEvent) => {
const parmas = router.getParams()
console.log(JSON.stringify(parmas))
})
}
}
}
1.4 页面返回前增加一个询问框
系统默认询问框
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter2 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('获取参数').onClick(() => {
const params = router.getParams()
console.log(JSON.stringify(params))
})
Button('返回上一页').onClick(() => {
/**
* 使用showAlertBeforeBackPage
* 在跳转前弹框提示
*/
router.showAlertBeforeBackPage({
message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容
});
// 返回上一页，在返回之前会拦截弹框提示
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
自定义询问框
import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct LearnRouter2 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('获取参数').onClick(() => {
const params = router.getParams()
console.log(JSON.stringify(params))
})
Button('返回上一页').onClick(async () => {
// 创建并显示对话框，对话框响应后同步返回结果。
const result = await promptAction.showDialog({
// 内容
message: '您还没有完成支付，确定要返回吗？',
// 按钮
buttons: [
{
text: '取消',
color: '#FF0000'
},
{
text: '确认',
color: '#0099FF'
}
]
})
if (result.index === 0) {
// 用户点击了“取消”按钮
console.info('User canceled the operation.');
} else if (result.index === 1) {
// 用户点击了“确认”按钮
console.info('User confirmed the operation.');
// 调用router.back()方法，返回上一个页面
router.back();
}
})
}
.width('100%')
}
.height('100%')
}
}
1.5 实例模式
-
需要页面栈只有一份 就单实例 否则默认
-
需要返回pushUrl 否则 replaceUrl
Standard
标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶
Single
单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。
// 引入路由模块
import router from '@ohos.router'
@Entry
@Component
struct LearnRouter1 {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Button('替换到页面2').onClick(() => {
/**
* pushUrl接收第二个参数
* 跳转模式
*/
router.pushUrl({
//
/**
* 目标url 和 src/main/resources/base/profile/main_pages.json
* 目录地址一致
*/
url: 'pages/LearnRouter2'
// 标准实例模式
// }, router.RouterMode.Standard)
// 单例模式
}, router.RouterMode.Single, (err) => {
// 跳转后的回调
if (err) {
// 跳转失败
console.log(err,'错误信息')
return
}
console.log("跳转成功")
})
})
}
.width('100%')
}
.height('100%')
}
}
1.6 Navigator路由容器组件
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-navigator-V5
可以简单理解为传统的声明式导航 而router则是编程式导航
路由容器组件，提供路由跳转能力。
Navigator({target:"路由跳转的页面",type:NavigationType})
-
target 跳转的路由页面
-
type NavigationType.Push 添加路由历史 NavigationType.Back 回退 NavigationType.Replace 替换跳转路由历史
普通跳转
在这里Navigator是一个容器，可以在里面放入对应的所有内容
@Entry
@Component
struct Index {
build() {
Column(){
Navigator({target:"pages/page1",type:NavigationType.Push}){
Row(){
Button("按钮1");
Text("文本内容1")
}
}
Navigator({target:"pages/page2",type:NavigationType.Push}){
Row(){
Button("按钮1");
Text("文本内容1")
}
}
}
}
}
传参
传参使用params(参数)
@Entry
@Component
struct Index {
msg:string="你好";
build() {
Column(){
Navigator({target:"pages/page1",type:NavigationType.Push}){
Text("文本内容")
}.params({msg:this.msg})
}
}
}
我们仍可以使用router.getParams()获取到传递来的参数
import { router } from '@kit.ArkUI'
interface IMsg{
msg:string
}
@Entry
@Component
struct Page1{
build() {
Row(){
Text((router.getParams() as IMsg).msg)
Navigator({ target: 'pages/Index', type: NavigationType.Back }) {
Image($rawfile("img_30.JPG")).width('100%').height('100%') // 图片存放在media文件夹下
}
}
}
}
激活模式 了解
import { router } from '@kit.ArkUI';
interface IData{
bool:boolean;
}
@Entry
@Component
struct Index {
@State nav1Bool:boolean=false;
@State nav1Boo2:boolean=false;
build() {
Column(){
Navigator({target:"pages/page1",type:NavigationType.Push}){
Text("文本内容")
}.active(this.nav1Bool)
Button("按钮").onClick(()=>{
this.nav1Bool=true;
})
}
}
onPageShow(): void {
const data:IData=router.getParams() as IData;
if(data) this.nav1Bool=data.bool || false;
}
}
@Entry
@Component
struct Page1{
build() {
Navigator({ target: 'pages/Index', type: NavigationType.Back }) {
Image($rawfile("img_30.JPG")).width('100%').height('100%') // 图片存放在media文件夹下
}.params({bool:false})
}
}
1.7 知识点小结
-
路由简介：路由就是用来跳转页面的 从而展示不同的.ets组件，在ets同级resources/base/profile/main_pages.json
-
跳转模式、路由传参、返回询问可
pushUrl/replaceUrl({
url
params: {}
})
-
实例模式（路由模式）
标准的 standard
Single 单实例
明确要页面站只有一个 Single 明确要返回的pushUrl
-
Navigator组件（声明式导航） Navigator({ target,type }){ 文本 } .params()
欢迎加入课程班级，考取鸿蒙认证：
https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type=1?ha_source=hmosclass&ha_sourceId=89000248
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
24
0- 0
已为社区贡献28条内容
所有评论(0)