Question

我目前正在使用laravel和vuejs进行预订应用程序，应用程序的流程是，一旦用户点击预订，他们就会被重定向到预订流程开始的页面，此页面是我实例化vue的地方，我还调用要呈现的第一个组件（Book Component）：

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

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

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

在vue中路由不同的组件

1 个答案: