Laravel 10中Vue3路由meta布局无法加载问题求助

原Vue2项目中通过路由meta指定的布局，在迁移到Laravel10的Vue3环境后无法正常加载，已调整路由文件结构但问题依旧，相关代码如下：

路由文件（AllRoutes.js） #

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
            layout: 'home',
            pageTitle: TITLE.HOME_PAGE_TITLE,
        },
    }
]

路由索引文件（routes/index.js） #

import { createRouter, createWebHistory } from "vue-router";
import AuthRoutes from "./AuthRoutes";
import TITLE from '../utilities/PageTitles';
import routes from "./AllRoutes";
const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

app.js文件 #

import "./bootstrap";

import router from "./routes/index";
import AuthService from "./services/AuthService";
import store from "./store";
import { onMounted, onBeforeUnmount, ref, createApp } from 'vue';
import Home from './layouts/Home.vue';

const app = createApp({
    setup() {
        const layout = ref('loading');

        const setLayout = (source, newLayout) => {
            console.log(source, newLayout,'source new layout');
            let exLayout = layout.value;
            layout.value = newLayout || router.currentRoute.value.meta.layout || 'loading';

            if (exLayout !== layout.value && layout.value === 'default') {
                if (AuthService.authToken()) {
                    getLoggedInUser() // To refresh user data in local storage on page reload
                        .then()
                        .catch();
                }

                getGeneralLookupData();
            }
        };

        const getLoggedInUser = async () => {
            // Your logic to get logged in user
            await store.dispatch('Login/getLoggedInUser');
        };

        const getGeneralLookupData = async () => {
            // Your logic to get general lookup data
            await store.dispatch('General/getGeneralLookupData');
        };

        onMounted(() => {
            EventBus.on('layout', (value) => {
                setLayout('event', value);
            });
        });

        onBeforeUnmount(() => {
            EventBus.off('layout');
        });

        return {
            layout,
            setLayout,
            getLoggedInUser,
            getGeneralLookupData
        };
    },
});


app.use(router);
app.use(store);
app.component('home', Home);
app.component('auth', Auth);
app.mount("#app");

export default app;

• 缺少路由切换时的布局更新触发逻辑
  当前代码仅通过EventBus监听布局变更，但路由切换时没有主动调用setLayout读取路由meta中的布局配置。需要在Vue3中通过监听路由变化触发布局更新：

  // 在setup中添加路由监听（需要导入watch）
  import { watch } from 'vue';
  
  setup() {
    // ... 现有代码
    watch(
      () => router.currentRoute.value,
      (to) => {
        setLayout('router', to.meta.layout);
      },
      { immediate: true } // 页面初始化时立即执行一次
    );
    // ...
  }
  

• 根组件缺少动态布局渲染逻辑
  当前根组件没有模板来根据layout值渲染对应布局组件，需要补充模板内容：

  <!-- 为createApp的组件添加模板 -->
  const app = createApp({
    template: `
      <component :is="layout">
        <router-view></router-view>
      </component>
    `,
    setup() { /* ... 现有逻辑 ... */ }
  });
  

• EventBus在Vue3中失效
  Vue3已移除全局EventBus，原EventBus.on/off无法正常工作。如果需要通过事件更新布局，建议改用Pinia状态管理，或直接通过路由守卫处理。

• 布局组件注册不完整
  代码中注册了auth组件但未导入，需补充导入语句：

  import Auth from './layouts/Auth.vue'; // 添加这行
  

• 初始化时未主动设置布局
  页面加载时仅监听EventBus，未主动读取当前路由的meta布局，需在onMounted中补充初始化调用：

  onMounted(() => {
    setLayout('init', router.currentRoute.value.meta.layout); // 新增这行
    EventBus.on('layout', (value) => {
      setLayout('event', value);
    });
  });
  

内容的提问来源于stack exchange，提问作者Abdul Rehman