SAPUI5路由类配置引发内部与跨应用导航冲突问题求助

I've run into this exact navigation conflict in SAPUI5 before—let's break down the root cause and fix it while keeping both reliable internal navigation (with proper back button behavior) and working cross-app navigation:

Root Cause #

• With sap.m.routing.Router: Internal navigation works flawlessly because it uses your viewLevel config to manage the navigation stack. But cross-app navigation only updates the URL without loading the target view—this happens because the sap.m router doesn't automatically listen to hash changes triggered by the SAP Fiori Launchpad/Shell (the mechanism behind cross-app navigation).
• Switching to sap.ui.core.routing.Router: Cross-app navigation starts working, but the back button always jumps to the home page instead of the previous screen. That's because the core router doesn't support the viewLevel-based stack management that sap.m's router relies on.

Fix 1: Keep sap.m.routing.Router + Add Hash Change Listener #

This approach preserves the sap.m router's stack management while manually handling cross-app hash updates.

Step 1: Add Hash Change Listener in Component.js

Update your Component's init method to listen for Shell-level hash changes and force the router to match the new hash:

init: function() {
  // Call parent component init first
  sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

  // Initialize your app router
  const oRouter = this.getRouter();
  oRouter.initialize();

  // Listen for cross-app hash changes from the Fiori Shell
  const oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
  oCrossAppNavigator.registerHashChange((oEvent) => {
    const sNewHash = oEvent.newHash;
    // Skip internal navigation changes to avoid duplicate processing
    if (sNewHash && !oRouter.getHashChanger().isNavigationPending()) {
      // Trigger router to match the new cross-app hash
      oRouter.navTo(sNewHash, undefined, true);
    }
  });
}

Step 2: Validate Cross-App Navigation Code

Make sure your cross-app navigation generates a shell hash that aligns with your app's routes. For example, if linking to your indexlevel route:

const oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
// Generate hash using your Fiori Launchpad-configured semantic object/action
const sHash = oCrossAppNavigator.hrefForExternal({
  target: {
    semanticObject: "Link", // Use your configured semantic object
    action: "Display",
    parameters: {
      key: "your-item-key" // Match your route's parameter
    }
  }
});
// Trigger cross-app navigation
oCrossAppNavigator.toExternal({ target: { shellHash: sHash } });

Fix 2: Custom Router Class (Cleaner Advanced Option) #

If you want a more integrated solution, create a custom router extending sap.m.routing.Router that includes cross-app hash handling by default:

sap.ui.define(["sap/m/routing/Router"], (Router) => {
  return Router.extend("JoskinEngineItem.CustomRouter", {
    constructor: function() {
      Router.apply(this, arguments);
      const oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
      const oRouter = this;
      // Register cross-app hash change listener
      oCrossAppNavigator.registerHashChange((oEvent) => {
        const sNewHash = oEvent.newHash;
        if (sNewHash) {
          oRouter._onHashChanged(sNewHash);
        }
      });
    }
  });
});

Then update your manifest.json to use this custom router:

"routing": {
  "config": {
    "routerClass": "JoskinEngineItem.CustomRouter",
    // ... your existing routing configs
  },
  // ... your routes and targets
}

Verify Back Button Behavior #

With either fix, you'll retain the sap.m.routing.Router (or its custom extension), so your viewLevel configuration will still work as intended—the back button will navigate to the previous screen based on your view hierarchy instead of jumping to the home page.

内容的提问来源于stack exchange，提问作者john doe