Vue3中Vue Router命名视图无法渲染问题求助

我是Vue3新手，当前遇到一个问题：页面有左右并排的两个div，希望在右侧div中渲染不同组件。我查阅了Vue Router文档并尝试解决，但未成功。

以下是组件简化版本：

LeadSelection.vue #

希望在右侧面板展示的组件，后续还会有更多同类组件

<template>
    <div class="flex flex-col gap-4">
        ...
        <p class="font-normal text-[#91a3d9] text-center">
            Select the lead whose profile you want to check.
        </p>
    </div>
</template>

LeadList.vue #

左侧为表格，右侧通过命名视图展示组件，期望点击不同按钮/选择行时切换右侧组件

<template>
    <div id="left-side" class="flex flex-col bg-white rounded-lg w-3/5 p-10">
        ......
    </div>
    <div id="right-side" class="bg-[#dfe7fa] items-center place-content-center rounded-lg p-10 w-2/5">  
        <RouterView name="selection" />
        <RouterView name="profile" />
        <RouterView name="addLead" />
        <RouterView name="loadLead" />
    </div>
</template>

此外还有LeadAndList.vue、LeadAndListView.vue、布局组件及路由配置文件。当前右侧div为空，尝试修改路由配置后，组件要么不显示，要么占满全屏。请问我哪里操作错误，该如何实现右侧div按需展示不同组件？

问题分析 #

你当前的问题核心在路由配置逻辑和RouterView的使用方式上：

1. 右侧div中直接放置多个命名RouterView，会导致匹配的组件同时渲染，或配置错误时全部不显示
2. 路由未正确嵌套到父路由下时，组件会渲染到根RouterView，导致占满全屏

解决方案步骤 #

1. 调整LeadList.vue的RouterView使用

不需要多个命名视图，只保留一个RouterView用于渲染子路由组件，同时确保左右div是并排布局：

<template>
    <!-- 外层加flex确保左右并排 -->
    <div class="flex w-full">
        <div id="left-side" class="flex flex-col bg-white rounded-lg w-3/5 p-10">
            <!-- 左侧表格/按钮区域，添加切换右侧组件的触发事件 -->
            <button @click="$router.push({ name: 'lead-selection' })">选择线索</button>
            <button @click="$router.push({ name: 'lead-profile', params: { id: 1 } })">查看详情</button>
        </div>
        <div id="right-side" class="bg-[#dfe7fa] flex items-center justify-center rounded-lg p-10 w-2/5">  
            <!-- 单个RouterView渲染子路由组件 -->
            <RouterView />
        </div>
    </div>
</template>

2. 配置嵌套路由

将LeadList设为父路由，右侧要展示的组件作为子路由，这样子组件会渲染到父组件内部的RouterView中，不会全屏：

import { createRouter, createWebHistory } from 'vue-router'
import LeadList from '@/components/LeadList.vue'
import LeadSelection from '@/components/LeadSelection.vue'
import LeadProfile from '@/components/LeadProfile.vue'
import AddLead from '@/components/AddLead.vue'
import LoadLead from '@/components/LoadLead.vue'

const routes = [
  {
    path: '/leads',
    name: 'lead-list',
    component: LeadList,
    // 子路由会渲染到父组件的RouterView
    children: [
      // 默认子路由：进入/leads时右侧显示LeadSelection
      {
        path: '',
        name: 'lead-selection',
        component: LeadSelection
      },
      // 带参数的子路由：比如查看指定线索的详情
      {
        path: 'profile/:id',
        name: 'lead-profile',
        component: LeadProfile
      },
      {
        path: 'add',
        name: 'add-lead',
        component: AddLead
      },
      {
        path: 'load',
        name: 'load-lead',
        component: LoadLead
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 左侧触发路由切换

在左侧表格行点击或按钮点击事件中，通过$router.push切换子路由：

<!-- 表格行点击示例 -->
<tr v-for="item in leadList" :key="item.id" @click="$router.push({ name: 'lead-profile', params: { id: item.id } })">
  <td>{{ item.name }}</td>
  <td>{{ item.email }}</td>
</tr>

<!-- 新增按钮示例 -->
<button @click="$router.push({ name: 'add-lead' })">新增线索</button>

4. 排查常见错误

• 确保父组件外层是flex布局，避免左右div堆叠
• 子路由的path不要加前缀/，否则会成为根路径，导致组件全屏渲染
• 检查组件导入路径是否正确，避免因路径错误导致组件不显示

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