予約システムを作る #7：とりあえずの画面を作る 3

将来的にタイムテーブルを表示する画面を作る。 ただ、タイムテーブルについてはまだ整理できていないので未実装

タイムテーブルコンポーネント

まだ、どう作って良いか整理できていない。
とりあえず 予約内容入力画面に進む [予約する] ボタンと、 [カレンダーに戻る] ボタンを作っておく。
カレンダーに戻るボタンをクリックするとカレンダーに戻れるようにしておく。
ボタンクリックで画面遷移するには、buttonタグを router-link タグで囲み、
v-bind:to="{name: 'ルータの名前'}" を指定すれば出来るっぽい。
☆ resource/js/components/TimeTableComponent.vue

<template>
    <div class="container">
        <h1>タイムテーブル</h1>
        <button type="button" class="btn btn-success">予約する</button>
        <router-link v-bind:to="{name: 'book.calendar'}">
            <button type="button" class="btn btn-success">カレンダーに戻る</button>
        </router-link>
    </div>
</template>

ルーターの登録

app.js に タイムテーブルコンポーネントを追加する。
pathは /timetable、nameは book.timetable とした。
☆ resources/js/app.js

  ：
import TimeTableComponent from './components/TimeTableComponent';
  ：
const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'book.calendar',
            component: CalendarComponent,
        },
        {
            path: '/timetable',
            name: 'book.timetable',
            component: TimeTableComponent,
        },
    ],
});
  ：

カレンダーからの遷移

カレンダーコンポーネントの [予約する] ボタンクリックでタイムテーブルコンポーネントに遷移するように修正する。
☆ resources/js/components/CalendarComponent.vue

  ：
    
カレンダー
    
        
    
  ：

動作確認

"npm run dev" でビルドし表示、カレンダー画面の [予約する] ボタンでタイムテーブル画面に遷移することを確認する。

---

予約システム