jq跳转到指定页面_鸿蒙OS应用开发：页面的旋转跳跃-CSDN博客

天开地辟鸿蒙外，风回日动神灵会 ——[明] 张以宁

本次分享是鸿蒙OS应用开发的页面跳转案例，涉及的知识点主要有4个：

1. 页面创建与页面顺序；

2. 事件绑定：事件对象传参；

3. 路由带参数跳转页面；

4. 目标页面接收路由参数；

一、页面创建与页面顺序

在项目中找到pages目录，右键New一个JS Page ，写上页面名称，即可创建页面，开发工具会帮开发者创建好与页面名称一致的目录，目录下也会自动创建出hml、css、js三个文件，并且在config.json 文件中的pages数组中自动生成相应的页面路由，这一切都是自动的生成的。

如果把新增页面路由的位置调整为pages数组的第0位，这样会以这个子新增页面作为应用的首页，这跟小程序的体验是一样的。

二、事件绑定

这个案例中我采用绑定事件的按钮做触发跳转，但由于我要传递参数，这个触发事件不能使用onclick，因为onclick绑定的监听函数不能有形参，就不能传递事件对象，但可以使用ontouchstart或者ontouchend 替代；传递的参数需要在组件中声明属性并给值(data1、data2)，然后打印事件对象(需要JSON.Stringify()转换)，可观察到要去取出的参数。

page2.hml代码：

Hello 页面page2 data1="参数1" data2="参数2" style="background-color: #fff; font-size:30px;"> 跳转index

page2.js代码：

import router from '@system.router'export default {    data: {        title: '页面page2'    },    goIndex(EvObj){        //先打印一下EvObj，需要JSON.stringify转化        console.info("参数："+JSON.stringify(EvObj));        console.info("参数data1："+EvObj.currentTarget.attr.data1);        console.info("参数data2："+EvObj.currentTarget.attr.data2);        //router.push是路由跳转页面        router.push({            uri:'pages/index/index', //去config.json里面查找复制            params:{ // 路由跳转带参写法                data1:EvObj.currentTarget.attr.data1,                data2:EvObj.currentTarget.attr.data2            }        });    }}

三、路由带参数跳转页面

先引入路由模块：import router from '@system.router'，然后在函数中调用路由模块的跳转方法，主要有：

1. router.push：跳转到应用内的指定页面；

2. router.replace：用应用内的某个页面替换当前页面，并销毁被替换的页面；

3. router.back：返回上一页面或指定的页面；

4. uri 是目标页面路由字符串；

5. params是跳转页面传递的参数；

四、目标页面接收路由参数；

跳转到目标页面后，可以在页面中直接使用this接收参数，也可以直接显示到hml页面{{ data1 }} {{ data2 }}；

index.hml代码：

<div class="container">    <text class="title">        {{ $t('strings.hello') }} {{title}}    text>    <text class="title" desc="这里是data1、data2两个参数的接收">        {{ data1 }} {{ data2 }}    text>    <button onclick="back">      返回page2    button>div>

index.js代码：

import router from '@system.router'export default {    data: {        title: "",    },    onInit() {        this.title = this.$t('strings.world');        console.info("接收参数1："+this.data1);        console.info("接收参数2："+this.data2);    },    back(){        router.back();//返回前一页操作    }}

本次案例开发体验跟小程序和Vue差不多，但也有区别：

1. 小程序页面接收参数是利用onLoad(options)钩子函数，但鸿蒙OS文档中给出的钩子函数是不带形参的。

2. Vue的页面接收参数是使用路由对象，但鸿蒙OS的路由对象没有这一特性；

3. 鸿蒙页面接收参数只需this.参数名称即可，非常便捷；

4. 传参形式和小程序差不多：额外设置标签数据属性，然后通过事件对象获取；

官方文档参考链接：

生命周期：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-lifecycle-0000001054763898

组件通用事件：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-common-component-events-0000001051151132

页面路由：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-routes-0000000000611824

部分素材来源网络，如有侵权请联系删除