写在前面
熟悉了项目结构之后，下面我们就要试着去开发一个页面跳转功能，在这其中去理解鸿蒙是如何开发的，也是初步有点效果，给自己一个正反馈。
编写一个页面跳转功能
今天我们来编写一个页面跳转的功能，需求就是通过点击按钮，跳转到另外一个页面，进而在另外一个页面进行信息的展示。
那么要实现这个需求，我们需要从以下几个步骤来一一实现。
创建一个开始页面
首先，就是创建一个开始页面，因为之前我们已经创建一个测试示例，所以本次还是在原来的基础上进行一些更改。
在js文件下的pages/index.html页面中放置一个Next按钮。
代码如下：
<div class="container"> <text class="title"> {{ $t('strings.hello') }} {{ title }} </text> <button class="button" type="capsule" value="Next" onclick="tiaozhuan"></button> </div>
添加上此按钮后，我们如果这个时候运行项目，就会看到如下图所示的效果。
创建一个需要跳转的页面
随后我们再创建一个需要跳转的页面，鸿蒙IDE中同样也提供了页面的快捷创建，选中pages文件夹，右击，选择New-Js Page。
输入名称后，就会在此目录下会生成相应的html、js、css文件，如下图：
让我们在details.html文件中同样输入一段文字，来充当跳转后的页面展示。
<div class="container"> <text class="title"> 成功跳转到详情页面了！ </text> </div>
编写页面跳转逻辑
两个页面都准备好了之后，接下来就是去编写跳转的逻辑了，想必大家也注意到了，我们添加按钮时，有一个click事件。
猜得不错，这个方法就是要去实现跳转逻辑的关键。
让我们打开index.js，在其中输入以下代码：
import router from '@system.router'; export default { launch() { router.push ({ uri:'pages/details/details' }) } }
运行项目
既然都编写完成了，下面就是去验证一下了，先运行一下项目，进入以下页面中。
点击按钮联动
接下来我们点击Next，就会顺理成章的进入到跳转页面了。
总结
今天的收获很大，利用鸿蒙初步实现了一个功能，有了一个正反馈，如此才能更深入的研究下去。
