SAPUI5 route matched example

<!DOCTYPE HTML>
<html>

<head>



    <meta charset="UTF-8">

    <title>SAPUI5 example</title>

    <script id="sap-ui-bootstrap" data-sap-ui-preload="async" src="https://sapui5.hana.ondemand.com/1.44.8/resources/sap-ui-core.js" data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_belize" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"sapui5Example": "./"}'> 
        </script>

    <script>
                sap.ui.getCore().attachInit(function () {
                    sap.ui.require(["sap/ui/core/ComponentContainer"], function (ComponentContainer) {

                        new ComponentContainer({
                            name: "sapui5Example",
                            async: true,
                            manifest: true,
                            height: "100%",
                            componentCreated: function (oParams) {
                                var oComponent = oParams.getParameter("component");
                                // do something with the component instance
                            }
                        }).placeAt("content");

                    });
                });
    </script>
</head>

<body class="sapUiBody" id="content">
  


  
</body>

</html>

// Code goes here

/* Styles go here */



sap.ui.define(["sap/ui/core/UIComponent"],

    function (UIComponent) {
        "use strict";

        let that;

       
        return UIComponent.extend("sapui5Example.Component", {

            metadata: {
                manifest: "json"
            },

            init: function () {
                that = this;
             
                UIComponent.prototype.init.apply(that, arguments);


                that.getRouter().initialize();

            }
        }
        );

    }
);

{
    "_version": "{{appVersion}}",
    "start_url": "index.html",
    "sap.app": {
        "id": "seusDados",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "{{appVersion}}"
        },
        "title": "{{appTitulo}}",
        "description": "{{appDescricao}}",
        "sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject",
            "version": "1.38.11"
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_hcb",
            "sap_bluecrystal",
            "sap_belize"
        ]
    },
    "sap.ui5": {
        "rootView": {
            "viewName": "sapui5Example.app",
            "type": "XML"
        },
        "dependencies": {
            "minUI5Version": "1.30.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {},
                "sap.ushell": {},
                "sap.collaboration": {},
                "sap.ui.comp": {},
                "sap.uxap": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
  
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "controlId": "app",
                "controlAggregation": "pages",
                "transition": "slide",
                "bypassed": {
                    "target": "notFound"
                }
            },
            "routes": [
                {
                    "pattern": "",
                    "name": "rtHome",
                    "target": "tgHome"
                }
            ],
            "targets": {
                "tgHome": {
                    "viewPath": "sapui5Example",
                    "viewName": "home"
                },
                "notFound": {
                    "viewPath": "sapui5Example",
                    "viewName": "NotFound",
                    "transition": "show"
                }
            }
        }
    }
}

<mvc:View 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
    <App id="app"/>
    
  
</mvc:View>

<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core"
	height="100%"
	controllerName="sapui5Example.home">

	<Page
		title="Page"
		class="sapUiContentPadding" >
	
	</Page>
</mvc:View>

<mvc:View
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc">
    <MessagePage title="Not Found" text="Not Found" description="Not Found" showNavButton="true"/>
</mvc:View>

sap.ui.define(['sap/ui/core/mvc/Controller'],
	function(Controller) {
	"use strict";
	
	var that;

	return Controller.extend("sapui5Example.home", {
	  
	 
	 
	             onInit: function () {
	               
                that = this;
                 sap.ui.core.UIComponent.getRouterFor(that).getRoute('rtHome').attachPatternMatched(
                    onRouteOrSubRoutesMatched);
            }
            
            
            

	
	});
	
	  function onRouteOrSubRoutesMatched() {
	    
	    sap.ui.core.UIComponent.getRouterFor(that).navTo('yourOtherRoute');
	    
        }


});