Ionic4 路由跳转-loadChildren

最新推荐文章于 2024-02-19 07:00:00 发布

原创

最新推荐文章于 2024-02-19 07:00:00 发布 · 4.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4 #路由跳转

本文介绍了在 Ionic4 中使用 `loadChildren` 进行路由跳转的方法。通过修改 `tabs.router.module.ts` 和 `app-routing.module.ts` 文件，详细阐述了如何配置 `loadChildren` 以及 `redirectTo` 属性，解决路由跳转问题。同时提醒开发者在修改文件夹和页面命名时要确保一致性，避免项目运行错误。

今天小咸儿使用 ionic start myApp tabs --type=angular 创建了一个新项目，想要根据自己的业务需求修改一下页面，但是在路由跳转这犯了难。接下来仔细的说明一下使用 loadChild 如何进行页面跳转。

使用tabs创建项目，会在创建初始就带有三个tab页，将其改成自己需要的内容：
在这里插入图片描述
接下来需要注意的就是 tabs.router.module.ts 和 app-routing.module.ts 这两个页面了，如果是在创建项目的基础上修改路由的话，改动的地方就不是很大了。

首先看一下tabs.router.module.ts页面：
在这里插入图片描述
这里的loadChild中填写的就是修改过后的url地址，只要按照这个格式进行填写，就没有问题。 HomePageModule 则是 home.module.ts 中的名称

接下来需要注意的是loadChild下面的redirectTo
在这里插入图片描述
redirectTo

最低0.47元/天解锁文章

10 条评论

陪培 2021.03.03
原创不易，博主加油！欢迎关注，评论，点赞，一起交流

七星科技 2019.03.13
从非tab页返回首页时路径会变为tabs而不是tabs/home页面虽然是首页，但是不执行首页中的任何生命周期函数，怎么解决
- 冰糖凉粉回复陈新月-Phyllis 2019.03.22
  [reply]csxypr[/reply] 我碰到一个问题，就是和上面老兄差不多，除了tabs 那几个页面其他页面我都需要隐藏下面的tabs栏，ionic3是有指令隐藏的，而ionic4 暂时没发现，然后我就想到通过路由的方式，比如从tabs/usercenter进入到studentlist，这样studentlist页面就不会显示tabs栏因为不在tabs子路由下面，但返回的时候虽然页面显示的是tabs/usercenter的页面，而路由却是tabs,仅仅是tabs,导致tabs/usercenter页面的生命周期函数并不能被触发，就这样，返回键是原来的返回键，隐藏自带的返回键，自己写返回的路由的话应该可行，但无疑这种需求的页面多的话无疑增加了工作量
- 陈新月-Phyllis回复七星科技 2019.03.14
  [reply]qxkeji[/reply] 不知道你们那里的路由是如何跳转的，我这里是返回tabs/home,this.router.navigateByUrl('tabs/home'); 并且在home页面使用的是ionViewWillEnter()方法

wangjiali123123 2019.01.02
个人的想法：虽然已经申明path：tabs，但是你只是申明而已，redirect to 的时候想要跳转，就不能是。。/home，如果是这样router怎么识别是tabs下的home？只有tabs/home这种形式是加载的正确形式
- 陈新月-Phyllis回复wangjiali123123 2019.01.04
  [reply]wangjiali123123[/reply] 感谢您的评论，原来是这个样子。