接上一篇：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
本节内容： 增加训练页面并实现其与主页面的相互跳转
源码仓库地址：https://gitee.com/zhaoquan/harmonyoswatchdemo
创立训练页面
知识点：创立页面
页面跳转：router.replace
config.json 中 Pages 页面的治理
批改训练页面的代码
这里页面框架跟首页截然不同，所以就对应复制代码，而后略微做批改
<!--xunlian.hml--><div class="container"> <text class="title"><!-- Hello {{title}}--> 训练页面 </text> <input type="button" class="btn" value="返回" onclick="clickAction"></input></div>在 xunlian.hml 创立页面时生成的默认代码中将：
Hello {{title}} 改为： 训练页面
将点我改为返回： <input type="button" class="btn" value="返回" onclick="clickAction"></input>
训练页面 xunlian.css 跟主页面 index.css 款式一样，复制过去不必批改
//xunlian.jsimport router from '@system.router'export default { data: {// title: 'World' }, clickAction(){ // console.log("我被点击了") router.replace({ uri:'pages/index/index', }); }}在 xunlian.js 创立页面时生成的默认代码中将：
- Hello {{title}} 正文掉，训练页面不必这个 。
- 从 system 的 router 中导入 router： import router from '@system.router'。
- 应用router.replace实现页面跳转：router.replace({uri:'pages/index/index',});
uri 这里填写的 page/xxx/xxx，这个是在我的项目端 config.json管制的，DevEco Studio 2.0 beta，在 Pages 目录右键 -> New ->JS Page 这样的形式创立页面，config.json 里 pages 数组局部会主动填写
主页面的 index.js 文件对应批改：
主页面的 index.js 批改为：
- 在 js 默认代码中将： Hello {{title}} 正文掉，训练页面不必这个 。
- 从 system 的 router 中导入 router： `import router from '@system.router'。
- 应用router.replace实现页面跳转：router.replace({uri:'pages/xunlian/xunlian',});
启动模拟器
之前编辑如同保留就刷新这次如同没有，我的操作是，从新点 debug，操作入口：Run -> Debug 'entry'
下一篇：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203357560569140833&fid=0101303901040230869
原文链接：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869
作者：chatterzhao