ionic 入门 (9) 导航页面

继续讲解 ionic 路由的知识

首次进入app 导航页面

1. 新建一个项目 ** ionic start app tabs**
   直接生成带tabs 界面.
2. 创建一个Navigation页面 ionic g page navigation
   屏幕快照 2019-05-06 下午8.57.05.png
3. 开始搭建navigation html 样式

<ion-content>
<ion-slides pager="true" [options]="slideOpts" style="height: 100%">
  <ion-slide>
    <h1> 第一页 </h1>
  </ion-slide>
  <ion-slide>
    <h1> 第二页  </h1>
  </ion-slide>
  <ion-slide>
    <h1> 第三页 </h1>
    <ion-button color="primary" (click)="totabs()" >师傅领进门</ion-button>
  </ion-slide>
</ion-slides>
</ion-content>

配置路由守卫

1. 创建路由守卫ionic g guard firstguard

   屏幕快照 2019-05-06 下午9.02.41.png

2. 创建守卫规则

export class FirstguardGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    const count = window.localStorage.getItem('count');
    if (count === null || count === undefined) {
      this.router.navigateByUrl('navigation');
        return false;
    }
    return true;
  }
}

3. 注入路由守卫 屏幕快照 2019-05-06 下午9.09.43.png
4. 实现守卫规则

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full'},
// 这路还可以加入用户判断用户是否登录的路由 ,  让用户进入到app 必须先登录
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' , , canActivate: [FirstguardGuard]},
  { path: 'navigation', loadChildren: './navigation/navigation.module#NavigationPageModule' },
];

5. 实现计数和专挑

import { Router } from '@angular/router';
constructor(private router: Router) { }
totabs() {
    window.localStorage.setItem('count', '1');
    this.router.navigateByUrl('');
}

写的不好 欢迎大家纠正 一起成长