Vue.js hash router option vue-3-bridge (module-federation#3722)

Co-authored-by: CocooDanielle <dapeen.feng@gmail.com>

Author: timdamen

.changeset/swift-kiwis-argue.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/bridge-shared': patch
+'@module-federation/bridge-vue3': patch
+---
+
+vue.js has router option added to the vue3-bridge

packages/bridge/bridge-shared/src/type.ts

@@ -2,6 +2,7 @@ export interface ProviderParams {
   moduleName?: string;
   basename?: string;
   memoryRoute?: { entryPath: string };
+  hashRoute?: boolean;
   style?: React.CSSProperties;
   className?: string;
 }

packages/bridge/vue3-bridge/src/provider.ts

@@ -28,7 +28,14 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
       __APP_VERSION__,
       async render(info: RenderFnParams) {
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
-        const { moduleName, dom, basename, memoryRoute, ...propsInfo } = info;
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          hashRoute,
+          ...propsInfo
+        } = info;
         const app = Vue.createApp(bridgeInfo.rootComponent, propsInfo);
         rootMap.set(dom, app);
 
@@ -46,19 +53,32 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
           app,
           basename,
           memoryRoute,
+          hashRoute,
           ...propsInfo,
           ...extraProps,
         });
-
         if (bridgeOptions?.router) {
-          const history = info.memoryRoute
-            ? VueRouter.createMemoryHistory(info.basename)
-            : VueRouter.createWebHistory(info.basename);
+          let history;
+          let routes = bridgeOptions.router.getRoutes();
+
+          if (info.memoryRoute) {
+            history = VueRouter.createMemoryHistory(info.basename);
+          } else if (info.hashRoute) {
+            history = VueRouter.createWebHashHistory();
+            routes = routes.map((route) => {
+              return {
+                ...route,
+                path: info.basename + route.path,
+              };
+            });
+          } else {
+            history = VueRouter.createWebHistory(info.basename);
+          }
 
           const router = VueRouter.createRouter({
             ...bridgeOptions.router.options,
             history,
-            routes: bridgeOptions.router.getRoutes(),
+            routes,
           });
 
           LoggerInstance.debug(`createBridgeComponent render router info>>>`, {

packages/bridge/vue3-bridge/src/remoteApp.tsx

@@ -17,6 +17,7 @@ export default defineComponent({
     moduleName: String,
     basename: String,
     memoryRoute: Object,
+    hashRoute: Boolean,
     providerInfo: Function,
     rootAttrs: Object,
   },
@@ -39,6 +40,7 @@ export default defineComponent({
         dom: rootRef.value,
         basename: props.basename,
         memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
       };
       LoggerInstance.debug(
         `createRemoteComponent LazyComponent render >>>`,
@@ -92,6 +94,7 @@ export default defineComponent({
         dom: rootRef.value,
         basename: props.basename,
         memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
       });
 
       (providerInfoRef.value as any)?.destroy({ dom: rootRef.value });
@@ -100,6 +103,7 @@ export default defineComponent({
         dom: rootRef.value,
         basename: props.basename,
         memoryRoute: props.memoryRoute,
+        hashRoute: props.hashRoute,
       });
     });