What is the difference between attachMatched() and attachPatternMatched() and/or attachRouteMatched() and attachRoutePatternMatched() in SAPUI5?

Question

Would be happy about an example of what is the difference between the following SAPUI5 routing approaches:

sap.ui.core.routing.Route:

• attachMatched()
• attachPatternMatched()

sap.ui.core.routing.Router:

• attachRouteMatched()
• attachRoutePatternMatched()

API says for attachMatched() and attachPatternMatched() nothing about any difference.

API says for attachRouteMatched():

Attach event-handler fnFunction to the routeMatched event of this sap.ui.core.routing.Router.

API says for attachRoutePatternMatched():

Attach event-handler fnFunction to the routePatternMatched event of this sap.ui.core.routing.Router. This event is similar to route matched. But it will only fire for the route that has a matching pattern, not for its parent Routes.

E.g. could use

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("sap.ui.demo.wt.controller.Detail", {
        onInit: function () {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.getRoute("detail").attachMatched(this._onObjectMatched, this);              
            // oRouter.attachRouteMatched(this._onObjectMatched, this);
        },
        _onObjectMatched: function (oEvent) {
            this.getView().bindElement({
                path: "/" + oEvent.getParameter("arguments").invoicePath,
                model: "invoice"
            });
        }
    });
});

or

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("sap.ui.demo.wt.controller.Detail", {
        onInit: function () {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
            // oRouter.attachRoutePatternMatched(this._onObjectMatched, this);
        },
        _onObjectMatched: function (oEvent) {
            this.getView().bindElement({
                path: "/" + oEvent.getParameter("arguments").invoicePath,
                model: "invoice"
            });
        }
    });
});

No difference to see. Don't get «But it will only fire for the route that has a matching pattern, not for its parent Routes.» Thought attachRouteMatch() would fire only as well for the route that has a matching pattern.

Answer 1

The differences in this context are:

1. sap.ui.core.routing.Route and sap.ui.core.routing.Router

sap.ui.core.routing.Route's attachMatched or attachPatternMatched fires for a specific stated route. In the following the route «detail»:

let oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("detail").attachMatched(this._onObjectMatched, this);   

---

sap.ui.core.routing.Router's attachRouteMatched or attachRoutePatternMatched fires for any route:

let oRouter = sap.ui.core.UIComponent.getRouterFor(this);            
oRouter.attachRouteMatched(this._onObjectMatched, this);

For the sake of clarification: the sap.ui.core.routing.Router's methods would have the same results as sap.ui.core.routing.Route's if a restriction was added for a specific route:

_onObjectMatched: function(oEvent) {
    if (oEvent.getParameter("name") !== "detail") {
        …
    }
}

But nevertheless, sap.ui.core.routing.Router fires _onObjectMatched for any route. The restriction to the detail route occurs in the fired method _onObjectMatched with the if clause. sap.ui.core.routing.Route fires _onObjectMatched in the first place only if the «detail» route is hit.

2. sap.ui.core.routing.Router's attachMatched/sap.ui.core.routing.Route's attachRouteMatched and sap.ui.core.routing.Router's attachPatternMatched/sap.ui.core.routing.Route's attachRoutePatternMatched

attachMatched/attachRouteMatched fires for a matched route. attachMatched fires for any route or subroute. attachRouteMatched fires for a specified route's match.

---

To conclude:

• attachPatternMatched/attachRoutePatternMatched fires for a matched subroute.
• attachPatternMatched fires for the route's subroutes.
• attachRoutePatternMatched fires for any matched subroute. i.e. attachPatternMatched/attachRoutePatternMatched fires for no parent routes.

---

tl;dr:

• Specific route with sap.ui.core.routing.Route.
• No specific route with sap.ui.core.routing.Router.
• attachMatched/attachRouteMatched fires for any route.
• attachPatternMatched/attachRoutePatternMatched fires for subroutes or, not for parent routes.