Laravel 11+Vue3+InertiaJS持久化布局失效问题求助

问题原因 #

你当前在每个页面组件中通过defineOptions({ layout: Admin })单独指定布局，这会导致每次页面切换时，Inertia都会销毁旧的布局组件实例，重新创建新的布局实例，因此布局内的输入框等组件状态会被重置。

解决方案 #

要实现布局持久化，需要让Inertia复用同一个布局组件实例，而不是每次页面切换都重建。推荐使用Inertia的全局布局配置：

方案1：全局默认布局 #

修改app.js，直接在createInertiaApp中配置全局布局：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
// 全局导入你的Admin布局
import Admin from "@fire/Pages/Layouts/Admin.vue"

createInertiaApp({
  resolve: name => {
    const pages = Object.assign(
      {}, 
      import.meta.glob('@pages/Pages/**/*.vue', { eager: true }), 
      import.meta.glob('./Pages/**/*.vue', { eager: true })
    );

    let page
    if (name.startsWith('PackageName::')) {
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
    }
    return page
  },
  // 配置全局布局，页面内容会作为布局的插槽内容渲染
  layout: (page) => h(Admin, {}, () => page),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

之后移除所有页面组件中通过defineOptions指定布局的代码，这样布局组件只会初始化一次，页面切换时仅替换插槽内的页面内容，布局的状态会被保留。

方案2：支持多布局切换 #

如果需要不同页面使用不同布局，可以通过页面元信息（meta）来指定，再在全局布局逻辑中处理：

1. 在页面组件中定义布局标识：

<script setup>
defineOptions({
  meta: {
    layout: 'admin' // 可自定义布局标识，比如'other'
  }
})
</script>

2. 修改app.js的布局配置：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import Admin from "@fire/Pages/Layouts/Admin.vue"
import OtherLayout from "@fire/Pages/Layouts/OtherLayout.vue"

// 维护布局映射表
const layoutMap = {
  admin: Admin,
  other: OtherLayout
}

createInertiaApp({
  resolve: name => {
    // 原resolve逻辑保持不变
    const pages = Object.assign(
      {}, 
      import.meta.glob('@pages/Pages/**/*.vue', { eager: true }), 
      import.meta.glob('./Pages/**/*.vue', { eager: true })
    );

    let page
    if (name.startsWith('PackageName::')) {
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
    }
    return page
  },
  layout: (page) => {
    // 根据页面meta选择布局，默认使用Admin
    const Layout = layoutMap[page.props.meta?.layout] || Admin
    return h(Layout, {}, () => page)
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

关键说明 #

• 全局布局模式下，布局组件的实例会被持久化，页面切换时仅更新插槽内的页面内容，因此布局内的响应式状态（如输入框内容）不会丢失。
• 确保你的Vite别名@fire已正确指向自定义包的路径，避免布局组件导入失败。

内容的提问来源于stack exchange，提问作者James Baker