Backbone.js router.navigate()

The Backbone.js navigate method is used to update and save the application as URL. It can also be done by calling the route function.

Syntax:

Parameter explanation:

fragment: It specifies the name of the parameter in which URL will be displayed.

options: It specifies the options such as trigger and replace to call the route function and to update the URL.

Let's take an example.

See this example:

 <!DOCTYPE html>
   <head>
      <title>Router Navigate 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">
         var RouteMenu = Backbone.View.extend({
            el: '#routemenu',  
            events: {
               'click a' : 'onClick'
            },
            onClick: function( e ) {
               router.navigate('/');
            }
        });
        var Router = Backbone.Router.extend({
           routes: {
              'route/:id' : 'defaultRoute'
           },
        });
        var routemenu = new RouteMenu();
        Backbone.history.start();
     </script>
  <body>
    It refers to the view class 'RouteMenu' and creates the 3 links which changes the url when you click on the links
     <section id="routemenu">
        <ul>
           <li> <a href="#/route/1">route 1 </a> </li>
           <li> <a href="#/route/2">route 2 </a> </li>
           <li> <a href="#/route/3">route 3 </a> </li>
       </ul>
    </section>
  </body>
  </html>

Test it Now

Output:

Save the above code in navigate.html file and open this file in a new browser.