无法导航，因为“无法导航到名称为...的路线”

Question

我是SAPUI5的初学者，目前通过它开发应用程序。我想在点击按钮时导航到另一个页面，但它没有发生。我正在关注official tutorial。

Component.js

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "test/model/models"
], function(UIComponent, Device, models) {
  "use strict";

  return UIComponent.extend("test.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      // call the base component's init function
      UIComponent.prototype.init.apply(this, arguments);
      // create the views based on the url/hash
      this.getRouter().initialize();
    }

  });
});

的manifest.json

{
  "_version": "1.1.0",
  "sap.app": {
    "_version": "1.1.0",
    "id": "test",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "resources": "resources.json",
    "ach": "ach",
    "sourceTemplate": {
      "id": "servicecatalog.connectivityComponent",
      "version": "0.0.0"
    },
    "dataSources": {
      "mainService": {
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "localUri": "localService/metadata.xml"
        },
        "uri": "localService/metadata.xml"
      }
    }
  },
  "sap.ui": {
    "_version": "1.1.0",
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": ["sap_hcb", "sap_bluecrystal"]
  },
  "sap.ui5": {
    "_version": "1.1.0",
    "rootView": {
      "viewName": "test.view.Home",
      "type": "XML"
    },
    "dependencies": {
      "minUI5Version": "1.30.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "test.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService"
      }
    },
    "resources": {
      "css": [{
        "uri": "css/style.css"
      }]
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "test.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        }
      },
      "routes": [{
        "pattern": "",
        "name": "appHome",
        "target": "home"
      }],
      "targets": {
        "home": {
          "viewName": "Home",
          "viewLevel": 1
        },
        "notFound": {
          "viewName": "NotFound",
          "transition": "show"
        }
      }
    }
  }
}

Home.view.xml

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="test.controller.Home"
>
  <App>
    <Page
      class="sapUiResponsiveContentPadding"
      title="{i18n>homePageTitle}"
    >
      <Button
        text="DisplayNotFound"
        press="onDisplayNotFound"
        class="sapUiTinyMarginEnd"
      />
    </Page>
  </App>
</mvc:View>

Home.Controller.js

sap.ui.define([
  "sap/ui/core/mvc/BaseController"
], function(BaseController) {
  "use strict";

  return BaseController.extend("test.controller.Home", {
    onDisplayNotFound: function(oEvent) {
      // display the "notFound" target without changing the hash
      this.getRouter().getTargets().display("notFound", {
        fromTarget: "home"
      });
    }

  });
});

NotFound.view.xml

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="test.controller.NotFound"
>
  <MessagePage
    title="{i18n>NotFound}"
    text="{i18n>NotFound.text}"
    showNavButton="true"
    navButtonPress="onNavBack"
    description="{i18n>NotFound.description}"
  />
</mvc:View>

NotFound.controller.js

sap.ui.define([
  "sap/ui/core/mvc/BaseController"
], function(BaseController) {
  "use strict";

  return BaseController.extend("test.controller.NotFound", {
    onInit: function() {
      var oRouter = this.getRouter();
      var oTarget = oRouter.getTarget("notFound");
      oTarget.attachDisplay(function(oEvent) {
        this._oData = oEvent.getParameter("data"); // store the data
      }, this);
    },

    // override the parent's onNavBack (inherited from BaseController)
    onNavBack: function(oEvent) {
      var oHistory, sPreviousHash, oRouter;
      // in some cases we could display a certain target when the back button is pressed
      if (this._oData && this._oData.fromTarget) {
        this.getRouter().getTargets().display(this._oData.fromTarget);
        delete this._oData.fromTarget;
        return;
      }
      // call the parent's onNavBack
      BaseController.prototype.onNavBack.apply(this, arguments);
    }

  });
});

BaseController.js

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/core/routing/History"
], function(Controller, History) {
  "use strict";

  return Controller.extend("test.controller.BaseController", {
    getRouter: function() {
      return sap.ui.core.UIComponent.getRouterFor(this);
    },

    onNavBack: function(oEvent) {
      var oHistory = History.getInstance();
      var sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        this.getRouter().navTo("appHome", {}, true /*no history*/ );
      }
    }

  });
});

Answer 1

The error message…

  

无法导航到名称为[...]的路由，因为该路由不存在

…仅在调用router API navTo时显示。 ^src 意思是，在某个地方，您必须（必须）调用navTo("notFound")。由于"notFound"中没有定义路线/sap.ui5/routing/routes，因此无法进行明显的导航。