Updated example to use non-hash based routing.

example/index.html

@@ -22,9 +22,9 @@
             <ul class="menu_holder">
                 <li> examples
                     <div class="menu_li_content">
-                        <a href="#/">popular people</a>
-                        <a href="#/rockets">top rockets</a>
-                        <a href="#/prices">price card</a>
+                        <a id="peopleLink">popular people</a>
+                        <a id="rocketLink">top rockets</a>
+                        <a id="priceLink">price card</a>
                     </div>
                 </li>
 
@@ -82,6 +82,18 @@
     }
     */
 
+    document.getElementById('peopleLink').addEventListener("click", function(){
+        wuObject.navigateTo('/');
+    });
+
+    document.getElementById('rocketLink').addEventListener("click", function(){
+        wuObject.navigateTo('/rockets');
+    });
+
+    document.getElementById('priceLink').addEventListener("click", function(){
+        wuObject.navigateTo('/prices');
+    });
+
 
 </script>
 

example/js/Wirup.js

@@ -29,7 +29,7 @@ wirup.prototype = (function () {
         return httpRequest.responseText;
       });
     },
-    _appLocation = window.location.hash.split("#")[1],
+    _appLocation = window.location.pathname,
     _views,
     _registerViews = () => {
       return _wijax(
@@ -46,8 +46,8 @@ wirup.prototype = (function () {
       return new Promise((resolve, reject) => {
         let _index;
         var _url = _appLocation;
-        if (_appLocation === undefined || _appLocation == "/") {
-          window.location = "/#/";
+        if (_appLocation === undefined) {
+          window.location = "/";
         }
         if (_views) {
           for (var i = 0; i <= _views.length - 1; i++) {
@@ -76,13 +76,18 @@ wirup.prototype = (function () {
       );
     },
     _bindRouter = () => {
-      window.onhashchange = function () {
-        if (window.location.hash != _appLocation) {
-          _appLocation = window.location.hash.split("#")[1];
-          _init();
-        }
+      window.onpopstate = (event) => {
+        _appLocation = window.location.pathname; // Handle back/forward button
+        _init();
       };
     },
+    _navigateTo = (url) => {
+      history.pushState(null, null, url); // Update URL without reloading
+      _appLocation = url; // Update internal app location
+      _getTemplate("contentBody").then(() => {
+        _renderViewComponents();
+      });
+    },
     _dataStore = {},
     _components = {},
     _loadObserver = {},
@@ -289,6 +294,7 @@ wirup.prototype = (function () {
     registerAction: _registerAction,
     buildComponent: _buildComponent,
     buildComponents: _buildComponents,
+    navigateTo: _navigateTo,
     registerData: _registerData,
     addData: _addData,
     findIndexByKey: _findIndexByKey,
@@ -300,4 +306,4 @@ wirup.prototype = (function () {
     init: _init,
   };
 })();
-window.wuObject = new wirup();
+window.wuObject = new wirup();