Vue多组件路由实现咨询：Laravel+Vue预订应用路由问题

嘿，我来帮你搞定Laravel+Vue预订应用里的组件路由实现！结合你的需求和代码片段，下面是一步步的实操方案：

1. 先搞定Vue Router依赖 #

首先确保项目里装了Vue Router，根据你用的Vue版本选择对应命令：

# Vue 3 版本
npm install vue-router@next

# Vue 2 版本
npm install vue-router@3

2. 配置Vue Router实例 #

在resources/js目录下新建router/index.js，把预订流程的组件路由规则写进去：

// Vue 3 写法
import { createRouter, createWebHistory } from 'vue-router';
import BookComponent from '../components/BookComponent.vue';
// 按需添加其他预订流程组件，比如日期选择、订单确认
import DateSelection from '../components/DateSelection.vue';
import OrderConfirm from '../components/OrderConfirm.vue';

const routes = [
  {
    path: '/book',
    name: 'book',
    component: BookComponent,
    meta: { title: '启动预订' }
  },
  {
    path: '/book/date',
    name: 'book-date',
    component: DateSelection,
    meta: { title: '选择预订日期' }
  },
  {
    path: '/book/confirm',
    name: 'book-confirm',
    component: OrderConfirm,
    meta: { title: '确认订单' }
  }
];

const router = createRouter({
  history: createWebHistory(), // 用history模式去掉URL里的#
  routes
});

// 可选：路由守卫，比如检查用户是否登录才能进入预订流程
router.beforeEach((to, from, next) => {
  // 这里可以加权限校验逻辑
  next();
});

export default router;

如果是Vue 2，代码调整成这样：

import Vue from 'vue';
import VueRouter from 'vue-router';
import BookComponent from '../components/BookComponent.vue';

Vue.use(VueRouter);

const routes = [
  // 路由规则和上面一致
];

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

export default router;

3. 修改Laravel Blade视图的挂载逻辑 #

结合你提供的代码片段，把直接渲染组件的写法改成用<router-view>，让路由来控制组件渲染：

@section('content')
    {{-- <div id="mute" class="on"></div> --}}
    <div style="padding: 0.9rem" id="app">
        <!-- 路由匹配到的组件会自动渲染在这里 -->
        <router-view></router-view>
        
        <!-- 如果你需要命名视图（对应你注释的bookBus），可以这么写 -->
        {{-- <router-view name="bookBus"></router-view> --}}
    </div>
@endsection

如果要用命名视图，记得在路由规则里把component改成components，比如：

{
  path: '/book',
  name: 'book',
  components: {
    default: BookComponent,
    bookBus: BookBusComponent // 你的对应组件
  }
}

4. 在Vue入口文件注册路由 #

打开resources/js/app.js，把路由挂载到Vue实例上：

// Vue 3 写法
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Vue 2版本的写法：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

5. 组件内实现路由跳转 #

在你的Book Component里，用两种方式实现跳转：

<template>
  <div class="book-component">
    <h3>开始你的预订之旅</h3>
    <!-- 方式1：用router-link组件（推荐，自带激活样式） -->
    <router-link :to="{ name: 'book-date' }">选择预订日期</router-link>
    
    <!-- 方式2：用编程式路由跳转 -->
    <button @click="$router.push({ name: 'book-date' })">下一步</button>
  </div>
</template>

6. 配置Laravel后端路由 #

最后在routes/web.php里添加指向预订启动页面的路由：

Route::get('/book', function () {
    return view('booking-start'); // 你的Blade视图文件名
})->name('booking.start');

这样用户点击预订按钮后，跳转到这个路由就能加载Vue并启动预订流程了。

内容的提问来源于stack exchange，提问作者Dapo Michaels