鸿蒙开发-实现页面跳转与页面返回

系统管理员 2022-10-11 13:51 268阅读 0赞

# 场景 #

鸿蒙基于JS搭建HelloWorld并修改国际化文件：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118274050][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]

在上面基于JS搭建起来Hello World之后，要新建另一个页面，并实现页面间的跳转和返回。

怎样新建页面可以参照如下

鸿蒙开发-基础组件介绍及chart组件使用：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118333539][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118333539]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 新建页面 #

新建一个todolist页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

然后在config.json中加入此页面的路由。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

打开应用主页面

添加一个按钮并设置其点击事件。

在js中导入router

import router from '@system.router'

然后点击事件的具体执行方法

clickToToDoList(){
            router.push({
                uri: 'pages/todolist/index'
            });
        },

通过router.push实现路由跳转。

这里的url就是上面新建页面并配置的路由。

然后在todolist页面再添加一个返回的button

并且设置其点击事件

goback(){
            router.back();
       }

实现效果

![20210701113613852.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118333539]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/c80a832ca6fe4a3b8519328d3d7e1200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/ed90c5b08fed4cf6a4a3f894c398b338.png
[20210701113613852.gif]: /images/20221005/1bde353da3d240618d6a161912df1d5b.png