Vue 3 中的动态布局与 Vite答案

【问题标题】：Dynamic layout in Vue 3 with ViteVue 3 中的动态布局与 Vite
【发布时间】：2021-11-02 00:22:39
【问题描述】：

Vue 和 Vite 的新手，但试图让动态布局在这里正常工作。我相信我有需要的东西，但元数据似乎总是以空对象或undefined 的形式出现。

AppLayout.vue

<script setup lang="ts">
  import AppLayoutDefault from './stub/AppLayoutDefault.vue'
  import { markRaw, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const layout = markRaw(AppLayoutDefault)
  const route = useRoute()

  console.log('Current path: ', route.path)
  console.log('Route meta:', route.meta)

  watch(
    () => route.meta,
    async (meta) => {
      try {
        const component = await import(`./stub/${meta.layout}.vue`)
        layout.value = component?.default || AppLayoutDefault
      } catch (e) {
        layout.value = AppLayoutDefault
      }
    },
    { immediate: true }
  )
</script>

<template>
  <component :is="layout"> <router-view /> </component>
</template>

App.vue

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

每条路由都有相应的元集，其中包含一个名为 layout 的属性。

我似乎无法在第一次加载或任何点击导航栏中的链接（这只是路由器链接）时正确应用布局。

【问题讨论】：

标签： vue.js vue-router vuejs3 vite

【解决方案1】：

主要问题是layout被初始化为markRaw()，这不是反应式ref：

const layout = markRaw(AppLayoutDefault) // ❌ not reactive

解决方案

将layout 初始化为ref。
不要查看完整的 route 对象，而是查看 route.meta?.layout，因为这是处理程序唯一相关的字段。
用markRaw() 包裹layout 的新值，以避免组件定义发生反应。

const layout = ref() 1️⃣

watch(
  () => route.meta?.layout as string | undefined, 2️⃣
  async (metaLayout) => {
    try {
      const component = metaLayout && await import(/* @vite-ignore */ `./${metaLayout}.vue`)
      layout.value = markRaw(component?.default || AppLayoutDefault) 3️⃣
    } catch (e) {
      layout.value = markRaw(AppLayoutDefault) 3️⃣
    }
  },
  { immediate: true }
)

demo

【讨论】：