HarmonyOS开发案例 router路由-数据传输

效果展示：

1.建立项目包
2.创建文件

3.代码部分：
4.显示部分：

Index.hml

记录

时间：{{ time }}地点：{{ address }}人员：{{ personal }}

Index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.boxs{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.text {
    font-size: 20px;
    color: #333;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 20px;
}

Index.js

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.boxs{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.text {
    font-size: 20px;
    color: #333;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 20px;
}

输入记录部分：
Tuoter.hml

输入记录

Touter.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.box{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    width: 100%;
}

Touter.js

import router from '@system.router';
export default {
    data:{
        time:"",
        address:"",
        personal:"",
    },
    getChange(e){
        let idName = e.target.id
        if (idName === "1") {
            this.time = e.value
        }else if (idName === "2") {
            this.address = e.value
        }else if (idName === "3") {
            this.personal = e.value
        }
    },
    btnClick(){
        router.push({
            uri:"pages/index/index",
            params:{
                time:this.time,
                address:this.address,
                personal:this.personal,
            }
        })
    }
}