What is the difference between sap.ui.core.routing.Router.navTo() and sap.m.routing.Targets.display()?

Question

Let’s say we I have one route and one target:

"routes": [{
  "pattern": "modify",
  "name": "modify",
  "target": [
    "master",
    "modify"
  ]
}],
"targets": {
  "modify": {
    "viewName": "Modify",
    "viewId": "modify",
    "viewLevel": 2
  }
}

So I can access the route by this.getRouter().navTo("modify"), meanwhile I can access the target by this.getRouter().getTargets().display("modify"). Both API can carry parameter by the second argument. It seems to achieve the same effect.

I can access target without defining a route for it. So I did not quite understand why I need a route?

Ref: sap.m.routing.Targets and sap.ui.core.routing.Router

Answer 1

display displays the target view without changing the hash value in contrast to navTo.

You can find more information in the tutorial "Display a Target Without Changing the Hash".

---

Both API can carry parameter by the second argument. It seems to achieve the same effect.

• The data in display method is for the display event handler. When the event is fired, the handler carries the data we passed earlier.
• The parameter map we can pass to navTo is mandatory if the pattern actually awaits a parameter, e.g. if we've defined the pattern like this initially: "pattern": "modify/{id}". Check out "Navigate to Routes with Mandatory Parameters".

Answer 2

Just complement Boghyon's answer:

1. Route pattern is defined in Router, and hash is set in Router. That's the main difference.BTW, UI5 uses crossroads and hasher to help implementing router.
2. navTo() in sap.m.routing.Router is borrowed from sap.ui.core.routing.Router
3. display() in sap.m.routing.Targets is borrowed from sap.ui.core.routing.Targets
4. in _routeMatched of Route, oRouter._oTargets._display is called. So _display is called in both Router and Targets.

5. The parameter they use are different.navTo use Route name, and display use Target name. Sometimes they are defined the same.

   onToPage2 : function () {
     // this.getOwnerComponent().getRouter().navTo("pageRoute2");
     this.getOwnerComponent().getRouter().getTargets().display("pageTarget2");
   },
   
   onToPage1 : function () {
     this.getOwnerComponent().getRouter().navTo("pageRoute1");
     // this.getOwnerComponent().getRouter().getTargets().display("pageTarget1");
   }