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

予約登録成功時の暫定画面を作る。

予約完了コンポーネント

☆ resources/js/components/FinishComponent.vue

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

ルーターの登録

☆ resources/js/app.js

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

予約登録成功時に予約完了画面を表示

/api/store呼び出し成功時に book.finish を呼び出すように修正
☆ resources/js/components/ConfirmComponent.vue

  ：
    axios.post('/api/store', this.$route.params.book)
    .then((res) => {
        this.$router.push({name: 'book.finish'});
    });
    ：

---

予約システム