Laravel 通过vue中的不同组件进行路由

我目前正在与laravel和vuejs合作开发一个预订应用程序，该应用程序的流程是，一旦用户单击预订，他们将被重定向到预订过程开始的页面，我将在该页面实例化vue，我还调用要呈现的第一个组件（book组件）：

@section('content')

{{-- <div id="mute" class="on"></div> --}}
<div style="padding: 0.9rem" id="app">

    {{-- <router-view name="bookBus"></router-view> --}}
    <booker :dref="{{ $route }}" :user="{{ Auth::user()->id }}"></booker>
    <router-view></router-view>


</div>

@stop

@section('scripts')

在此之后，下一个要呈现的组件是要求用户确认提交的详细信息的确认组件，之后是最终付款组件。问题是，一旦成功处理预订组件，我就以编程方式移动到确认组件。但是confirm组件直接呈现在book组件的下面。我想要实现的是确认组件单独渲染，而不是在book组件下面

@section('content')

{{-- <div id="mute" class="on"></div> --}}
<div style="padding: 0.9rem" id="app">

{{-- <router-view name="bookBus"></router-view> --}}
<router-view></router-view>


</div>

@stop

@section('scripts')

@section('content')

{{-- <div id="mute" class="on"></div> --}}
<div style="padding: 0.9rem" id="app">

{{-- <router-view name="bookBus"></router-view> --}}
<router-view></router-view>


</div>

@stop

@section('scripts')

// Import Components
import BookComponent    from './components/BookComponent.vue';
import ConfirmComponent from './components/ConfirmComponent.vue';
import PayComponent from './components/PayComponent.vue';

const routes = [
{
  path: '/',
  component: BookComponent,
  name: 'bookBus',
  meta: {
      mdata: model,
      userId: userId 
  }
},
{
    path: '/confirm/:bookId',
    component: ConfirmComponent,
    name: 'confirmBook',
},
{
    path: 'payment/:bookRef',
    component: PayComponent,
    name: 'payNow',
},
{
  path: '*',
  redirect: '/'
}
]