ionic4和ionic5创建登陆页login跳转到tabs

这篇博客分享了作者在使用Ionic4和Ionic5开发过程中遇到的登录页到tabs页面跳转的问题及解决方案。作者提到由于Ionic资料有限,这个问题困扰了他一段时间。最终通过五个步骤解决了问题:1) 新建登录页;2) 修改app-routing.module.ts设置登录页为默认页面;3) 在login.page.ts中使用路由组件跳转;4) 修改tabs-routing.module.ts中默认路径;5) 自行测试。作者计划在未来发布DEMO供读者参考。
摘要由CSDN通过智能技术生成

这是我的第一篇博客,希望我的文章能帮助到需要的朋友。
近两年一直在学习ionic和Angular,ionic优点是比较容易上手,适合新手学习,可以快速创建App应用,相对于Android原生,难度降低很多,但事物总有两面性,ionic很好,但也有两个缺点,一是就是各类资料太少,很难找到需要的资料,而且各版本代码不同,基本不兼容。
最近打算做一个记帐用的APP,需要在tabs之前加入一个用户登陆页面,之前也曾经给单页面做过登陆页,没有问题,但给tabs加登陆页尝试过多次,但没有成功,这次必须解决这个问题,不然以后的设计无法进行,在网上查找资料,用各种五花八门方法,均没有成功,无法从login页到tbas页实现路由跳转,功夫不负有心人,折腾了一周后,终于找到了实现这个功能的方法。
实现起来比较简单,先新建个项目,然后五个步骤即可完成:
一、新建登陆页:
ionic g page login
二、修改app-routing.module.ts文件,将logn页面改为默认首先显示的页面,修改完成后的效果
在这里插入图片描述
三、login.page.ts中引入ion-router路由组件,this.router.navigateByUrl(’/tabs’);从Html中执行跳转到tabs组件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值