diff --git a/.changeset/afraid-planets-juggle.md b/.changeset/afraid-planets-juggle.md new file mode 100644 index 00000000000..d6a0811e15b --- /dev/null +++ b/.changeset/afraid-planets-juggle.md @@ -0,0 +1,5 @@ +--- +'@module-federation/bridge-vue3': patch +--- + +fix(vue3-bridge): bridge-vue3 parameter lossing issue diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx index c2cc5e18e44..e4d79000905 100644 --- a/apps/router-demo/router-host-2000/src/App.tsx +++ b/apps/router-demo/router-host-2000/src/App.tsx @@ -135,7 +135,7 @@ const App = () => { path="/remote2/*" Component={() => <Remote2App style={{ padding: '20px' }} />} /> - <Route path="/remote3/*" Component={() => <Remote3App />} /> + <Route path="/remote3/*" Component={() => <Remote3App test="123" />} /> <Route path="/memory-router/*" Component={() => <Wraper3 />} /> <Route path="/remote-render-error/*" diff --git a/apps/router-demo/router-remote3-2003/src/App.vue b/apps/router-demo/router-remote3-2003/src/App.vue index 9e1a99aff83..9385bd28e74 100644 --- a/apps/router-demo/router-remote3-2003/src/App.vue +++ b/apps/router-demo/router-remote3-2003/src/App.vue @@ -11,3 +11,12 @@ </template> <style scoped></style> + +<script lang="ts" setup> +interface Props { + test?: string; +} + +const props = defineProps<Props>(); +console.log('props', props); +</script> diff --git a/apps/router-demo/router-remote3-2003/src/export-app.ts b/apps/router-demo/router-remote3-2003/src/export-app.ts index 8dc83e648aa..e7cade5289d 100644 --- a/apps/router-demo/router-remote3-2003/src/export-app.ts +++ b/apps/router-demo/router-remote3-2003/src/export-app.ts @@ -1,12 +1,13 @@ -import { createApp } from 'vue'; import App from './App.vue'; -import './index.css'; import router from './router'; import { createBridgeComponent } from '@module-federation/bridge-vue3'; +import './index.css'; export default createBridgeComponent({ rootComponent: App, - appOptions: () => ({ - router, - }), + appOptions: ({ app }) => { + // Optional: adding a plugin to the new Vue instance on the host application side + // app.use(customPlugin); + return { router }; + }, }); diff --git a/packages/bridge/vue3-bridge/src/provider.ts b/packages/bridge/vue3-bridge/src/provider.ts index 1c64d5a26d2..77239ca2dea 100644 --- a/packages/bridge/vue3-bridge/src/provider.ts +++ b/packages/bridge/vue3-bridge/src/provider.ts @@ -28,7 +28,8 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) { __APP_VERSION__, async render(info: RenderFnParams) { LoggerInstance.debug(`createBridgeComponent render Info`, info); - const app = Vue.createApp(bridgeInfo.rootComponent); + const { moduleName, dom, basename, memoryRoute, ...propsInfo } = info; + const app = Vue.createApp(bridgeInfo.rootComponent, propsInfo); rootMap.set(info.dom, app); const beforeBridgeRenderRes = @@ -43,8 +44,9 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) { const bridgeOptions = bridgeInfo.appOptions({ app, - basename: info.basename, - memoryRoute: info.memoryRoute, + basename, + memoryRoute, + ...propsInfo, ...extraProps, });