qiankun实现子应用切换到子应用传递参数

qiankun实现子应用切换到子应用传递参数

qiankun 子应用切换到子应用

基座重写跳转方法 基座 => App.tsx

import { useState } from 'react';
import './App.css';
import { Layout, Menu } from 'antd';
import { Link, Routes, Route } from 'react-router-dom';
import routes from './routes';
import Home from './pages/Home';

const { Sider, Header, Content } = Layout;

function App() {
  const currentPath = window.location.pathname; // 当前path
  // 当前选择菜单
  const [selectedPath, setSelectedPath] = useState(
    routes.find(item => currentPath.includes(item.key))?.key || ''
  );

  // 重写函数
  const _wr = function (type: string) {
    const orig = (window as any).history[type]
    return function () {
      const rv = orig.apply(this, arguments)
      const e: any = new Event(type)
      e.arguments = arguments
      window.dispatchEvent(e)
      return rv
    }
  }
  // 绑定事件
  window.history.pushState = _wr('pushState')

  // 在这个函数中做跳转后的逻辑
  const bindHistory = () => {
    const currentPath = window.location.pathname;
    setSelectedPath(
      routes.find(item => currentPath.includes(item.key))?.key || ''
    )
  }

  // 绑定事件
  window.addEventListener('pushState', bindHistory)

  return (
    <Layout>
      <Sider collapsedWidth="0">
        <img src="https://www.itheima.com/images/logo.png" className='page-logo' alt="" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['main-app']}
          selectedKeys={[selectedPath || 'main-app']}
          onClick={({ key }) => setSelectedPath(key)}
        >
          {
            routes.filter((item) => item.showMenu).map(route => {
              return (
                <Menu.Item key={route.key}>
                  <Link to={route.path}>
                    {route.title}
                  </Link>
                </Menu.Item>
              );
            })
          }
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ padding: 0 }} />
        <Content style={{ margin: '24px 16px 0', height: '100%', background: '#fff', padding: '24px' }}>
          {/* 主应用渲染区域 */}
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>

          {/* 子应用渲染区域 */}
          <div id='sub-app'></div>
        </Content>
      </Layout>
    </Layout>
  );
}
export default App;

切换到vue子应用的操作

react子应用 到vue页 + 到vue传递参数

import './App.css';
import { Link, Routes, Route } from 'react-router-dom'
import List from './pages/List';
import Detail from './pages/Detail';

function App() {

  const goVue = () => {
    window.history.pushState({}, '', '/sub-vue')
  }
  const goVueDetails = () => {
    const data = { name: '小小亮', id: 1 };
    window.history.pushState(data, '', `/sub-vue/detail?name=${data.name}&id=${data.id}`);
  };
  return (
    <div className="App">
      <h2>react 子应用</h2>
      <div className='menu'>
        <Link to={'/'}>list</Link>
        <Link to={'/detail'}>detail</Link>
        <a onClick={goVue}>vue列表页</a>
        <a onClick={goVueDetails}>vue详情页</a>
      </div>
      <Routes>
        <Route path='/' element={<List />} />
        <Route path='/detail' element={<Detail />} />
      </Routes>
    </div>
  );
}
export default App;

vue子应用 details详情页面 接受传递的参数

<template>
  <div>Detail
    <div>
      name-{{ name }}
      id - {{ id }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import { useRoute } from 'vue-router';
const route = useRoute();
console.log('route', route);
const name:any = ref('')
const id:any = ref('')
name.value = route.query.name;
id.value = route.query.id;

</script>

切换到umi子应用的操作

react子应用 umi子应用 详情页并且传递参数

function App() {
  const goUmiDetails = () => {
    const data = { name: '小小飞', id: 2 };
    window.history.pushState(data, '', `/sub-umi/detail?name=${data.name}&id=${data.id}`);
  }
  return (
    <div className="App">
      <h2>react 子应用</h2>
      <div className='menu'>
        <a onClick={goUmiDetails}>umi详情页</a>
      </div>
    </div>
  );
}

export default App;

umi子应用 details详情页面 接受传递的参数

const Detail = () => {
  const searchParams = new URLSearchParams(window.location.search);
  const id: string | null = searchParams.get("id");
  const name: string | null = searchParams.get("name");
  console.log("详情参数:", id, "name", name);
  return (
    <div>
      <p>详情页内容</p>
      <p>
        name-{name} id-{id}
      </p>
    </div>
  );
};

export default Detail;

.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  base: '/sub-umi',
  npmClient: 'npm',
  plugins: ['@umijs/plugins/dist/qiankun'],
  qiankun: {
    slave: {},
  },
  headScripts: [
    { src: 'https://unpkg.com/axios@1.1.2/dist/axios.min.js', ignore: true },
  ],
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/detail', component: '@/pages/detail' },
  ],
});