[僕のlonicでスマホアプリ開発]#2 router設定

# はじめに
[\[僕のlonicでスマホアプリ開発\]#1 環境準備とプロジェクト作成](https://qiita.com/SSKNOK/items/e31329a74675af8c3493)の続きです。
アプリのひな型作成までは出来たので、ここからは開発らしきことを進めていければなと。
今回はrouterの設定を作成予定の画面分やっていきます。
参考は[こちら](https://ionicframework.com/docs/ja/v6/vue/navigation)の公式ドキュメント。


# 作成予定の画面
画面は以前にandroid studioで作ったとき同様下記をイメージ
- 残高確認画面
- 残高登録画面
- 口座登録画面
- データインポート/エクスポート画面

# ルーティング周りの修正
## タブ画面コンポーネント修正
`src/views/TabsPage.vue`が下記のタブ部分になるので、こちらを修正します。
<img width=300 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/3445addb-914a-870c-a583-54a868188296.png>


`icon`属性で指定している各アイコンは[こちら](https://ionic.io/ionicons?_gl=1*yd7bdh*_ga*MTcwODQyODE4NC4xNjg1MjUzNTUw*_ga_REH9TJF6KF*MTY4NTI3MjgzNi41LjEuMTY4NTI3NzgwMy4wLjAuMA..)から選べば良いそう。
もちろん自分で作成した画像ファイルも設定できます。
```vue:src/views/TabsPage.vue
<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <!-- 残高確認画面 -->
        <ion-tab-button tab="view" href="/tabs/view">
          <ion-icon aria-hidden="true" :icon="eyeOutline" />
          <ion-label>VIEW</ion-label>
        </ion-tab-button>

        <!-- 残高登録画面 -->
        <ion-tab-button tab="registBalance" href="/tabs/regist">
          <ion-icon aria-hidden="true" :icon="pencilOutline" />
          <ion-label>BALANCE</ion-label>
        </ion-tab-button>

        <!--口座登録画面 -->
        <ion-tab-button tab="EditAccount" href="/tabs/EditAccount">
          <ion-icon aria-hidden="true" :icon="personAddOutline" />
          <ion-label>ACCOUNT</ion-label>
        </ion-tab-button>

        <!-- データインポート/エクスポート画面 -->
        <ion-tab-button tab="importExport" href="/tabs/importExport">
          <ion-icon aria-hidden="true" :icon="swapVerticalOutline" />
          <ion-label>IM/EX</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup>
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { eyeOutline, pencilOutline, personAddOutline, swapVerticalOutline} from 'ionicons/icons';
</script>
```

## ルｰティングの修正

```js:src/router/index.js
import { createRouter, createWebHistory } from '@ionic/vue-router';
import TabsPage from '../views/TabsPage.vue'

const routes = [
  {
    path: '/',
    redirect: '/tabs/view'
  },
  {
    path: '/tabs/',
    component: TabsPage,
    children: [
      {
        path: '',
        redirect: '/tabs/view'
      },
      {
        path: 'view',
        component: () => import('@/views/View.vue')
      },
      {
        path: 'balance',
        component: () => import('@/views/Balance.vue')
      },
      {
        path: 'account',
        component: () => import('@/views/Account.vue')
      },
      {
        path: 'importExport',
        component: () => import('@/views/importExport.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

```

## 各画面の修正
こちらは別に必須ではないんですが、画面がちゃんと遷移してるよねが分かるように`src/views`配下の各ファイルをちょっと書き換えておきます。

## 修正後の画面
ちょっと画面ヘッダー部分のフォントが気に入らないですが、画面の下準備は完了ですね。
<img width=300 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/1bc87991-a6bf-ae51-b416-8d59318130c1.png>