从Vue 2迁移至Vue 3后，<router-view />无法在<component>组件内部显示的原因及解决方法

嘿，我刚碰到过完全一样的坑！这其实是Vue组件插槽的基础逻辑导致的，很容易被忽略。

问题原因 #

当你把<router-view />放在<component :is="layout">内部时，这段内容会被当作插槽内容传递给你的layout组件。但如果你的layout组件模板里没有声明<slot />，Vue就不知道该把这些内容渲染到哪里，自然就看不到<router-view />的输出了。

而把<router-view />放在<component :is="layout">外面时，它是直接作为当前父组件的子元素渲染，完全不受layout组件的影响，所以能正常工作。

解决方案 #

只需要给你的所有layout组件添加一个<slot />插槽，告诉Vue把外部传入的内容（也就是<router-view />）插到哪里就行。

举个具体的例子：

1. 修改你的Layout组件（比如DefaultLayout.vue） #

<template>
  <div class="app-layout">
    <!-- 这里是你的布局结构，比如头部、侧边栏 -->
    <nav class="sidebar">侧边导航</nav>
    <header class="top-bar">顶部栏</header>
    
    <!-- 关键：添加匿名插槽，用来接收外部的<router-view /> -->
    <main class="content-area">
      <slot></slot>
    </main>
    
    <footer class="app-footer">页脚</footer>
  </div>
</template>

2. 现在就可以正常使用动态组件包裹<router-view />了 #

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

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import DefaultLayout from './layouts/DefaultLayout.vue'
import AdminLayout from './layouts/AdminLayout.vue'

const route = useRoute()
// 假设你根据路由元信息动态切换布局
const layout = computed(() => {
  return route.meta.layout || DefaultLayout
})
</script>

这样修改后，<router-view />就会被正确渲染到layout组件的插槽位置，布局和路由视图都能正常显示啦！

内容的提问来源于stack exchange，提问作者Александр Корегин