In many web applications, a user may want to show link-able, bookmark-able, and shareable URLs to meaningful locations within an app or a web page. The router updates the browser URL whenever there is any change in the web page. In short, the router detects any changes to the URL and changes the page content accordingly. For example, when you google something you are able to find a series of links pointing to a specific web page. Once you click on a page, the router makes sure it shows the web page you've clicked.

# Code
For example, if you have three routes that are displayed, you will want to visualize the changes that will be made to the URL when you click on any one of the links. Then, open a notepad file and save it as `data.html`, for example. Next, introduce the code below as part of the HTML file. 

<!DOCTYPE html>
<html>
   <head>
      <title>Router Example</title>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>
   
   <script type = "text/javascript">
   
      //'RouteMenu' is the view class to be used
      var RouteMenu = Backbone.View.extend ({
         el: '#routes',   // refrence element

         // the changes to happen when a link is clicked
         events: {
            'click a' : 'onClick'
         },

         // After clicking on a link, router calls 'navigate' to update URL
         onClick: function( click ) {

            // Uses the navigate() to update changes to URL.
            router.navigate('/');
         }
      });
      var Router = Backbone.Router.extend ({

         //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            'route/:id' : 'defaultRoute'
         },
      });
      
      // define a new instance of rootmenu
      var new_route = new RouteMenu();

      // This start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>
   
   <body>
      
      
      <section id = "routes">
         <ul>
            <li> <a href = "#/route1">route 1 </a> </li>
            <li> <a href = "#/route2">route 2 </a> </li>
            <li> <a href = "#/route3">route 3 </a> </li>
         </ul>
      </section>
   </body>
</html>

codemirror

By default, when you run `data.html` file in the browser, it shows:
```
file:///H:/data.html
```
Now, when you click on `route1`, the URL changes to: 
```
file:///H:/data.html#/route1
```
When you click on `route2`, the URL changes to: 
```
file:///H:/data.html#/route2
```
Similarly, when you click on `route3`, the URL changes to: 
```
file:///H:/data.html#/route3
```

How to generate routing with URLs in Backbone.js

The router updates the browser URL to reflect changes in the web page, enabling linkable and shareable URLs.