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

【问题标题】：Routing through different components in vue通过 vue 中的不同组件进行路由
【发布时间】：2018-10-03 06:39:56
【问题描述】：

我目前正在使用 laravel 和 vuejs 开发一个预订应用程序，该应用程序的流程是，一旦用户点击预订，他们就会被重定向到预订流程开始的页面，这个页面是我实例化 vue 的地方，并且我还调用要渲染的第一个组件（书籍组件）：

@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')

我的 app.js 文件如下所示：

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

Vue.component('booker',BookComponent);



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',
    }

]

const router = new VueRouter({ 
    routes,
    mode: 'history',
});

const app = new Vue(
    { 
        router,
}).$mount('#app')

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

【问题讨论】：

标签： laravel vue.js single-page-application vue-router

【解决方案1】：

@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')

app.js

// 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: '/'
}
]

【讨论】：