@module-federation/bridge-vue3 2.3.1 → 2.3.3

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.3",
   "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.3",
+    "@module-federation/runtime": "2.3.3",
+    "@module-federation/sdk": "2.3.3"
   },
   "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;
 }
 
 /**
@@ -27,8 +28,13 @@ function addBasenameToNestedRoutes(
    * Join two path segments, collapse multiple slashes, and optionally
    * preserve a trailing slash that was present in the original value.
    * A bare '/' root is never considered an intentional trailing slash.
+   *
+   * Relative paths (not starting with '/') are left untouched — Vue Router
+   * resolves them against the parent route, which already carries the basename.
    */
   const prefixPath = (original: string): string => {
+    if (!original.startsWith('/')) return original;
+
     const hasTrailingSlash = original.length > 1 && original.endsWith('/');
     const normalized =
       `${basename}/${original}`.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
@@ -68,6 +74,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
  *
@@ -89,11 +148,15 @@ export function processRoutes(
     );
 
   // Use Map/Set for O(1) lookup performance
-  const flatRoutesMap = new Map<string, VueRouter.RouteRecordNormalized>();
+  // Store arrays because multiple routes can resolve to the same path
+  // (e.g. a parent and a default child with path: '')
+  const flatRoutesMap = new Map<string, VueRouter.RouteRecordNormalized[]>();
   const processedRoutes = new Set<VueRouter.RouteRecordNormalized>();
 
   flatRoutes.forEach((route) => {
-    flatRoutesMap.set(route.path, route);
+    const existing = flatRoutesMap.get(route.path) || [];
+    existing.push(route);
+    flatRoutesMap.set(route.path, existing);
   });
 
   /**
@@ -115,9 +178,20 @@ export function processRoutes(
     for (let j = 0; j < route.children.length; j++) {
       const child = route.children[j];
       const fullPath = normalizePath(prefix, child.path);
-      const childRoute = flatRoutesMap.get(fullPath);
+      const candidates = flatRoutesMap.get(fullPath) || [];
+      // Find a matching route that:
+      // 1. Hasn't been processed yet
+      // 2. Isn't the current parent route (avoids circular references when
+      //    a child with path: '' resolves to the same absolute path)
+      // 3. Matches by name when the child definition specifies one
+      const childRoute = candidates.find(
+        (r) =>
+          !processedRoutes.has(r) &&
+          r !== route &&
+          (child.name == null || r.name === child.name),
+      );
 
-      if (childRoute && !processedRoutes.has(childRoute)) {
+      if (childRoute) {
         // Create a new optimized route object with relative path for nested routes
         const relativeChildRoute: VueRouter.RouteRecordNormalized = {
           ...childRoute,
@@ -146,21 +220,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 };
 }