Ionic4路由配置

最新推荐文章于 2025-03-16 02:54:20 发布

qq_39239110

最新推荐文章于 2025-03-16 02:54:20 发布

阅读量2.9k

点赞数

文章标签： ionic4混合开发路由配置

本文链接：https://blog.csdn.net/qq_39239110/article/details/86536240

版权

本文介绍了Ionic4中创建和配置路由的详细步骤，包括新建页面、模块导入、HTML引用、路由配置以及在具体页面中调用新页面的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic 4路由配置方法：
步骤一：先新建一个page页面
$ ionic g page excute
步骤二：在tabs.module.ts里导入

import { ExcutePageModule } from '../pages/sub/excute/excute.module';

@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        TabsPageRoutingModule,
        ExcutePageModule,
    ],
    declarations: [TabsPage]
})

步骤三.在tabs.page.html中添加

<ion-tab tab="excute">
        <ion-router-outlet name="excute"></ion-router-outlet>
 </ion-tab>

步骤四.在tab.router.module.ts中添加
头部添加

import {ExcutePage} from '../pages/sub/excute/excute.page';

在routes的children下添加

 { path: 'excute', outlet: 'excute', component: ExcutePage }

步骤五：在相应的调用excutePage的页面添加调用，如这里是在homePage中调用ExcutePage
eg：
在home.page.ts中调用路由

export class HomePage extends BaseUI implements OnInit {
    public user: any;
    public userName: any;
    public cardcellnum = 4; // 每行4列
    public cards: any[] = [
        { title: '仓储管理', imgsrc: './assets/imgs/home/store01.png', routeurl: '/tabs/(store:store)' },
        { title: '生产统计', imgsrc: './assets/imgs/home/stat01.png', routeurl: '/tabs/(prodstat:prodstat)' },
        { title: '生产执行', imgsrc: './assets/imgs/home/prod01.png', routeurl: '/tabs/(excute:excute)' },
        { title: '供应商订单', imgsrc: './assets/imgs/home/supplier01.png', routeurl: '/tabs/(order:order)' },
        { title: '信息查询', imgsrc: './assets/imgs/home/query01.png', routeurl: '/tabs/(monitor:monitor)' },];