Vue3 Router能否配置主视图与侧边栏两个独立的createMemoryHistory路由？

完全可行，React Router 支持创建多个彼此独立的路由实例，每个实例使用专属的 createMemoryHistory 对象，两者的导航状态完全隔离，不会互相影响。以下是具体实现方案：

1. 创建独立的 MemoryHistory 实例 #

首先分别初始化两个独立的 history 对象，确保它们的状态互不共享：

import { createMemoryHistory } from 'history';

// 主视图专属 history
const mainHistory = createMemoryHistory();
// 侧边栏专属 history
const sidebarHistory = createMemoryHistory();

2. 配置两个独立的 Router 系统 #

将主视图和侧边栏分别用 <Router> 组件包裹，并传入对应的 history 对象。注意不要使用 BrowserRouter 或 HashRouter，这类组件会绑定全局 history，无法实现隔离：

import { Router, Routes, Route } from 'react-router-dom';

// 主视图路由组件
function MainViewRoutes() {
  return (
    <Router history={mainHistory}>
      <Routes>
        <Route path="/main/home" element={<MainHome />} />
        <Route path="/main/profile" element={<MainProfile />} />
        {/* 按需添加更多主视图路由 */}
      </Routes>
    </Router>
  );
}

// 侧边栏路由组件
function SidebarRoutes() {
  return (
    <Router history={sidebarHistory}>
      <Routes>
        <Route path="/sidebar/menu1" element={<SidebarMenu1 />} />
        <Route path="/sidebar/menu2" element={<SidebarMenu2 />} />
        {/* 按需添加更多侧边栏路由 */}
      </Routes>
    </Router>
  );
}

3. 独立导航实现 #

在各自的路由区域内，使用对应的导航方式：

• 声明式导航：直接使用 <Link> 组件，它会自动绑定当前 Router 实例的 history
• 编程式导航：调用对应 history 对象的 push/replace 方法

主视图内导航示例 #

import { Link } from 'react-router-dom';

function MainHome() {
  return (
    <div>
      <Link to="/main/profile">前往个人中心</Link>
      {/* 编程式导航 */}
      <button onClick={() => mainHistory.push('/main/profile')}>跳转个人中心</button>
    </div>
  );
}

侧边栏内导航示例 #

import { Link } from 'react-router-dom';

function SidebarMenu1() {
  return (
    <div>
      <Link to="/sidebar/menu2">切换到菜单2</Link>
      {/* 编程式导航 */}
      <button onClick={() => sidebarHistory.push('/sidebar/menu2')}>切换菜单</button>
    </div>
  );
}

4. 额外注意事项 #

• 两个路由系统的路径可以完全独立，无需担心路径冲突，因为它们的状态由各自的 history 维护
• 若需要监听路由变化，分别给两个 history 对象添加监听即可：

// 监听主视图路由变化
mainHistory.listen((location) => {
  console.log('主视图路由更新:', location.pathname);
});

// 监听侧边栏路由变化
sidebarHistory.listen((location) => {
  console.log('侧边栏路由更新:', location.pathname);
});

• 这种方案适用于页面内存在两个完全独立导航区域的场景，确保彼此操作互不干扰

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