ionic4 入门 (二) 创建项目

创建ionic 项目

1. 使用 ionic start app blank 新建一个空白的项目

   图片

2. 使用 ionic serve 启动服务

   图片 可以看到关于启动之后的样式

3. 打开文件, 文件夹自动包含了 home ts html scss ..

   12
   并且在 app-routing.module.ts 里面自动包含了home的路由 home

4. 创建tabs 底部导航栏 ionic g page tabs 会自动在app-routing.module.ts 里面自动包含 tabs 路径,

5. 在 tabs.page.html 里面, 创建底部导航栏

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

6. tabs.page.ts 里面配置路由

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home', children: [
        {
          path: '',
          loadChildren: '../home/home.module#HomePageModule',
          pathMatch: 'full'
        }
        ]
      },
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full'
  }
];

谢谢观看

• 这里是关于本章的视频https://v.qq.com/x/page/u0852lj2cow.html

ionic4 入门 (三) 完善tabs
ionic4 入门 (四) 路由守卫