@module-federation/bridge-vue3 2.3.1 → 2.3.2

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/module-federation/core.git",
     "directory": "packages/bridge/vue3-bridge"
   },
-  "version": "2.3.1",
+  "version": "2.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,9 +31,9 @@
     "vue-router": "=4"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "2.3.1",
-    "@module-federation/runtime": "2.3.1",
-    "@module-federation/sdk": "2.3.1"
+    "@module-federation/bridge-shared": "2.3.2",
+    "@module-federation/sdk": "2.3.2",
+    "@module-federation/runtime": "2.3.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",

package/src/index.ts

@@ -1,3 +1,4 @@
 export { createBridgeComponent } from './provider';
+export type { ProviderFnParams } from './provider';
 export { createRemoteComponent, createRemoteAppComponent } from './create';
 export type { RenderFnParams } from '@module-federation/bridge-shared';

package/src/provider.ts

@@ -16,9 +16,13 @@ type AddOptionsFnParams = {
 
 export type ProviderFnParams = {
   rootComponent: Vue.Component;
-  appOptions: (
-    params: AddOptionsFnParams,
-  ) => { router?: VueRouter.Router } | void;
+  appOptions: (params: AddOptionsFnParams) => {
+    router?: VueRouter.Router;
+    /** Called with the bridge's internal router after creation but before navigation.
+     *  Use this to register global guards (beforeEach, afterEach, etc.) that would
+     *  otherwise be lost when the bridge recreates the router. */
+    afterRouterCreate?: (router: VueRouter.Router) => void;
+  } | void;
 };
 
 export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
@@ -59,7 +63,7 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
           ...extraProps,
         });
         if (bridgeOptions?.router) {
-          const { history, routes } = processRoutes({
+          const { history, routes, patchRouter } = processRoutes({
             router: bridgeOptions.router,
             basename: info.basename,
             memoryRoute: info.memoryRoute,
@@ -72,6 +76,14 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
             routes,
           });
 
+          if (patchRouter) {
+            patchRouter(router);
+          }
+
+          if (bridgeOptions.afterRouterCreate) {
+            bridgeOptions.afterRouterCreate(router);
+          }
+
           LoggerInstance.debug(`createBridgeComponent render router info>>>`, {
             moduleName,
             router,

package/src/routeUtils.ts

@@ -10,6 +10,7 @@ export interface RouteProcessingOptions {
 export interface RouteProcessingResult {
   history: VueRouter.RouterHistory;
   routes: VueRouter.RouteRecordNormalized[];
+  patchRouter?: (router: VueRouter.Router) => void;
 }
 
 /**
@@ -68,6 +69,59 @@ function addBasenameToNestedRoutes(
   });
 }
 
+/**
+ * Create a patch function that rewrites path-based navigations to include
+ * the basename prefix.  This is needed because createWebHashHistory() does
+ * not accept a basename argument, so router.push('/foo') would bypass the
+ * prefixed route definitions.
+ *
+ * By patching push/replace/resolve *before* Vue Router resolves the
+ * location we also avoid the "No match found" console warning.
+ */
+function createHashBasenamePatch(
+  basename: string,
+): (router: VueRouter.Router) => void {
+  const normalized = basename.replace(/\/+$/, '');
+
+  /**
+   * Only absolute paths (starting with '/') that don't already carry the
+   * basename prefix need rewriting.  Relative segments ('settings'),
+   * query-only ('?tab=1'), and hash-only ('#anchor') strings are resolved
+   * by Vue Router against the current route and must pass through untouched.
+   */
+  const needsPrefix = (path: string): boolean =>
+    path.startsWith('/') &&
+    path !== normalized &&
+    !path.startsWith(normalized + '/');
+
+  const prefix = (path: string): string =>
+    `${normalized}${path}`.replace(/\/+/g, '/');
+
+  const rewrite = (
+    to: VueRouter.RouteLocationRaw,
+  ): VueRouter.RouteLocationRaw => {
+    if (typeof to === 'string') {
+      return needsPrefix(to) ? prefix(to) : to;
+    }
+    if ('path' in to && typeof to.path === 'string' && needsPrefix(to.path)) {
+      return { ...to, path: prefix(to.path) };
+    }
+    return to;
+  };
+
+  return (router) => {
+    const originalPush = router.push.bind(router);
+    const originalReplace = router.replace.bind(router);
+    const originalResolve = router.resolve.bind(router);
+
+    router.push = (to: VueRouter.RouteLocationRaw) => originalPush(rewrite(to));
+    router.replace = (to: VueRouter.RouteLocationRaw) =>
+      originalReplace(rewrite(to));
+    router.resolve = ((to: VueRouter.RouteLocationRaw, ...rest: any[]) =>
+      originalResolve(rewrite(to), ...rest)) as typeof router.resolve;
+  };
+}
+
 /**
  * Route processing solution based on path analysis
  *
@@ -146,21 +200,19 @@ export function processRoutes(
   }
 
   let history: VueRouter.RouterHistory;
+  let patchRouter: ((router: VueRouter.Router) => void) | undefined;
+
   if (memoryRoute) {
-    // Memory route mode
     history = VueRouter.createMemoryHistory(basename);
   } else if (hashRoute) {
-    // Hash route mode
     history = VueRouter.createWebHashHistory();
-    // Recursively process nested routes and add basename prefix to all paths
-    if (basename) routes = addBasenameToNestedRoutes(routes, basename);
+    if (basename) {
+      routes = addBasenameToNestedRoutes(routes, basename);
+      patchRouter = createHashBasenamePatch(basename);
+    }
   } else {
-    // Default Web History mode
     history = VueRouter.createWebHistory(basename);
   }
 
-  return {
-    history,
-    routes,
-  };
+  return { history, routes, patchRouter };
 }