Vue 3 + Vite 实现动态布局时route.meta为空或undefined问题求助

1. 修复布局变量的响应式定义 #

你当前使用markRaw包裹布局组件，该API的作用是标记对象为永久非响应式，后续修改layout.value完全不会触发视图更新，不符合需求，请替换为ref定义：

// 导入ref
import { ref, watch } from 'vue'
// 替换原有markRaw定义
const layout = ref(AppLayoutDefault)

2. 删除App.vue中多余的router-view #

你现在配置了两层<router-view>，会导致路由内容重复渲染、插槽逻辑混乱，直接修改App.vue为以下内容即可：

<script setup lang="ts">
  import AppLayout from '@/layouts/AppLayout.vue'
</script>
<template>
  <AppLayout />
</template>

AppLayout.vue中内置的<router-view>已经负责渲染路由内容，不需要在外层重复定义。

3. 优化监听逻辑适配嵌套路由场景 #

如果你的项目使用了嵌套路由，route.meta默认取最内层子路由的配置，如果仅在父路由配置了meta会拿到空值，调整监听逻辑从路由匹配栈中取值，同时优化监听精度：

watch(
  () => route.matched,
  async (matched) => {
    try {
      // 从最深层级的路由匹配项中取layout配置
      const layoutName = matched.slice().reverse().find(record => record.meta?.layout)?.meta.layout
      if (!layoutName) {
        layout.value = AppLayoutDefault
        return
      }
      const component = await import(`./stub/${layoutName}.vue`)
      layout.value = component?.default || AppLayoutDefault
    } catch (e) {
      layout.value = AppLayoutDefault
    }
  },
  { immediate: true, deep: true }
)

4. 核对路由配置与文件路径 #

• 确保路由表中对应路由明确声明了meta字段，示例配置如下：

// router/index.ts
const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
    meta: { layout: 'AppLayoutHome' } // 必须明确配置在对应路由下
  }
]

• 确认./stub/目录下存在对应名称的Vue文件，文件名大小写与meta中配置的完全一致（Vite生产环境对路径大小写敏感）。

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