SAPUI5 - Routing doesn´t work for second navTo

Question

I have a Problem regarding the Routing in Web IDE. I can navigate to the first View without Problems, but if I try to navigate to the second view, nothing happens and also no error Message appear.

I already recreated many examples found in the web and they works well. But all founded examples are based on one single routing to one view.

I did the following:

1. Created 4 views (app, view1, view2, view3)
   • app is the root view
   • view1 is the Default view
   • created a button&function in view1 to navigate to view2
   • created a button&function in view2 to navigate to view3
2. Enhanced manifest.json (see code below)
3. Initialized Router in component.js
4. Gave view app the id "app"

The Routing to view2 works, the Routing to view3 doesn´t work. I have uploaded my Project to github. Hope you can help.

https://github.com/macsarena/routing04

Answer 1

Couple of changes due to how routing works ( and a typo in XML_view View2 button).

SO, how routing works:

1. You change the hash of the url.
2. The router sees a change in URL and will load the FIRST target(s) which matches the pattern of the URL.

Now, as you know when we specify Curly_Braces i.e.e {} in pattern , it signifies a value. For better understand , consider follwing route:

           {
                "name": "Emp",
                "pattern": "Emp/{EmpID}",
                "target": ["View2"]
            },

Now, if I change my URL to hash : #/Emp/1, it will load view2.

Also, hash URL : : #/Emp/100, it will load ?? view2. Right! Because it matches the pattern, ie. Emp followed by a value (EmpID).

Now, consider your route:

{
            "name": "View2",
            "pattern": "{V2}",
            "target": ["View2"]
        }, {
            "name": "View3",
            "pattern": "{V3}",
            "target": ["View3"]
        }

The pattern for both the routes are same as both except a value and there is no differentiating factor. And remember router will always load the FIRST matched pattern target.

SO, When URL is : #/5, it will load view2 ( as matches the pattern first). If you put your name:view3 above name:view2, it will load view3 target first.

SO, point being you need to create unique hash URLs to load different views.

Let me change your routes to:

{
                "name": "View2",
                "pattern": "View2/{V2}",
                "target": ["View2"]
            }, {
                "name": "View3",
                "pattern": "View3/{V3}",
                "target": ["View3"]
            }

It will load view3 on press of button in view2.

Also, the typo in view2: onPressButton-> change to : onButtonPress ( as that is the name of the function in view2 controller).

Let me know if this helps. :)