天开地辟鸿蒙外，风回日动神灵会 ——[明] 张以宁
本次分享是鸿蒙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. 传参形式和小程序差不多：额外设置标签数据属性，然后通过事件对象获取；
官方文档参考链接：
生命周期：
组件通用事件：
页面路由：
部分素材来源网络，如有侵权请联系删除
