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