React-Router实现双视图共存：半透明覆盖层B叠加页面A

这个问题的核心是要打破路由默认的“页面替换”逻辑，让只有访问B路由时，A页面保留并作为背景，其他路由则正常替换A。下面分两种主流前端框架给出具体实现方案：

Vue Router 实现步骤 #

核心思路 #

通过路由元信息（meta）标记需要保留A的路由，在根布局中根据当前路由的meta值控制A组件的显示，同时让B组件以全屏半透明覆盖层的样式渲染在A上方。

1. 更新路由配置
   给B路由添加keepA: true的元信息，用来标记这个路由需要保留A：

const routes = [
  {
    path: '/a',
    name: 'A',
    component: () => import('../views/A.vue')
  },
  {
    path: '/b',
    name: 'B',
    component: () => import('../views/B.vue'),
    meta: { keepA: true } // 标记需保留A的路由
  },
  {
    path: '/other',
    name: 'Other',
    component: () => import('../views/Other.vue')
  }
]

2. 调整根布局（App.vue）
   把A组件和路由视图分开，根据当前路由的meta值决定是否显示A：

<template>
  <div id="app" style="position: relative;">
    <!-- 仅当路由标记了keepA时显示A，用keep-alive可保留A的状态 -->
    <keep-alive>
      <A v-if="$route.meta.keepA" />
    </keep-alive>
    <!-- 渲染当前路由对应的组件 -->
    <router-view />
  </div>
</template>

<script setup>
import A from './views/A.vue'
</script>

<style scoped>
/* 给B组件设置全屏半透明样式 */
.B {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
</style>

3. 状态保留说明
   如果需要A页面的表单输入、滚动位置等状态不丢失，一定要给A组件加上<keep-alive>包裹，这样切换到B再返回A时，A的状态会被保留。

React Router（v6）实现步骤 #

核心思路 #

利用useLocation钩子获取当前路由路径，判断是否为B路由，从而控制A组件的显示；同时将B组件设置为全屏覆盖层，确保它能叠加在A上方。

1. 配置路由与布局组件
   先创建一个全局布局组件，用来控制A的显示：

import { Outlet, useLocation } from 'react-router-dom';
import A from './views/A';

function Layout() {
  const location = useLocation();
  // 判断当前是否是B路由
  const shouldKeepA = location.pathname === '/b';

  return (
    <div style={{ position: 'relative' }}>
      {/* 仅当路由为/b时显示A */}
      {shouldKeepA && <A />}
      {/* 渲染当前路由的子组件 */}
      <Outlet />
    </div>
  );
}

然后更新路由配置，把Layout作为父路由包裹所有子路由：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import B from './views/B';
import Other from './views/Other';
import Layout from './Layout';

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { path: '/a', element: <A /> },
      { path: '/b', element: <B /> },
      { path: '/other', element: <Other /> }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

2. 设置B组件样式
   让B组件以全屏半透明的覆盖层形式渲染：

function B() {
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      zIndex: 100,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      {/* 这里放B的具体内容 */}
      <div style={{ backgroundColor: 'white', padding: '2rem', borderRadius: '8px' }}>
        B页面内容
      </div>
    </div>
  );
}

3. 状态保留说明
   如果需要保留A的状态，可以使用React.memo包裹A组件，或者结合本地存储、状态管理工具（如Redux）来保存A的状态；也可以使用第三方库react-keep-alive来实现类似Vue的<keep-alive>效果。

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