Vue3模态框路由问题：如何保留嵌套底层路由视图内容

你推测的方向完全正确——/modal路由里default: Main的配置会让路由系统把Main组件重新渲染到mainRouterView中，直接覆盖掉原本的主页面内容，这才导致bottomRouterView里的内容消失。要实现模态框叠加在主内容上的效果，核心是让模态框路由和主页面路由并行渲染，而不是替换主视图。

下面是具体的修复步骤：

1. 重构路由配置，使用命名视图实现并行渲染 #

把模态框路由配置成独立的命名视图，不再依赖Main组件，避免替换主视图内容。

问题路由示例（需修改） #

const routes = [
  {
    path: '/',
    component: Main,
    children: [
      { path: '', component: Home },
      { path: 'page-a', component: PageA },
      { path: 'page-b', component: PageB }
    ]
  },
  {
    path: '/modal',
    component: Main, // 这里会替换主视图，导致bottomRouterView消失
    children: [
      { path: '', component: ModalComponent }
    ]
  }
]

修改后的路由配置 #

const routes = [
  // 主页面路由：绑定到App.vue的mainRouterView
  {
    path: '/',
    components: {
      main: Main // 对应router-view的name="main"
    },
    children: [
      { 
        path: '', 
        components: {
          bottom: Home // 对应Main组件内的router-view的name="bottom"
        }
      },
      { 
        path: 'page-a', 
        components: {
          bottom: PageA
        }
      },
      { 
        path: 'page-b', 
        components: {
          bottom: PageB
        }
      }
    ]
  },
  // 模态框路由：独立绑定到App.vue的modalRouterView
  {
    path: '/modal',
    components: {
      modal: ModalComponent // 对应router-view的name="modal"
    }
  }
]

2. 给RouterView指定正确的name属性 #

在App.vue中，两个RouterView必须明确命名，和路由配置对应：

<template>
  <!-- 主视图区域，渲染Main组件及子页面 -->
  <router-view name="main"></router-view>
  <!-- 模态框区域，独立渲染，放在主视图外层 -->
  <router-view name="modal"></router-view>
</template>

在Main.vue中，内部的子视图也要指定name：

<template>
  <!-- 渲染Home/PageA/PageB的子视图 -->
  <router-view name="bottom"></router-view>
</template>

3. 用CSS实现模态框的叠加效果 #

给模态框组件添加固定定位样式，确保它悬浮在主内容上层，同时不影响主内容的显示：

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

4. 调整路由跳转逻辑 #

打开模态框时直接跳转至/modal，此时mainRouterView会保持当前的主页面（比如Home/PageA），modalRouterView渲染模态框；关闭模态框时，跳回之前的主页面路由即可（可以用router.go(-1)或者直接指定路由路径）。

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