利用页面路由router实现页面跳转
1.第一个页面设置简单样式' router.Page.ets '
在build里面创建简单样式利用布局组件,和文字、按钮组件,创建出第一个页面样式,代码如下:
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
效果如下:
2.设置第二个页面样式‘ SecondPage.ets’
代码如下:
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
效果图如下:
3.设置页面点击onclick事件,利用router实现页面跳转
.onClick(() => {
console.log(`成功点击跳转按钮`)
// 跳转到第二页
router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
console.log('成功跳转second page')
}).catch((err) => {
console.error(`跳转失败`)
})
})
4.设置第二个页面点击onclick事件
.onClick(() => {
console.info(`成功点击返回按钮`)
try {
// 返回第一页
router.back()
console.info('成功返回routerPage.ets')
} catch (err) {
console.error(`返回失败`)
}
})
5.综合代码
第一个页面' router.Page.ets ',第二个页面‘ SecondPage.ets’我们在页面头部需要导入路由模版
第一个页面' router.Page.ets '里面综合代码如下:
// Index.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
console.log(`成功点击跳转按钮`)
// 跳转到第二页
router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
console.log('成功跳转second page')
}).catch((err) => {
console.error(`跳转失败`)
})
})
}
.width('100%')
}
.height('100%')
}
}
第二个页面‘ SecondPage.ets’综合代码如下:
// Second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件,点击按钮时返回到第一页
.onClick(() => {
console.info(`成功点击返回按钮`)
try {
// 返回第一页
router.back()
console.info('成功返回routerPage.ets')
} catch (err) {
console.error(`返回失败`)
}
})
}
.width('100%')
}
.height('100%')
}
}