Ionic4路由配置

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)' },];

猜你喜欢

转载自blog.csdn.net/qq_39239110/article/details/86536240
今日推荐