How to navigate between Routes basing on Page URL? - backbone.js

Question

I am working on a Backbone Application that contains multiple routes. I would like to modify my changePage function and make it take a hash as a parameter and when it is called it changes the page basing on that URL.
This is my router
define(["jquery","backbone",'views/header'], function( $, Backbone, Header) {
var ApplicationRouter = Backbone.Router.extend({
_header: null,
routes: {
"": "login",
"home": "home",
},
initialize: function() {
this.firstPage = true;
this.fromBack = false;
i18n.currentLocal = localStorage.getItem("currentLocal") || 'en';
Backbone.history.start();
},
login: function() {
var self = this;
require(['views/loginPageView'], function(loginView){
self.changePage(new loginView(),true);
});
},
home: function() {
var self = this;
require(['views/homePageView'], function(homeView){
self.changePage(new homeView(),false);
});
},
changePage: function (page,noPanel) {
var deferred = $.Deferred();
$page = $(page.el);
$page.attr('data-role', 'page');
console.log(this.firstPage);
if(this.firstPage){
$('#pageContent').append($page);
page.render();
if(!noPanel){
self._header = new Header({parent: $("#header")});
}
}
else{
$('#pageContent').html($page);
$("#header").empty();
page.render();
}
if (this.firstPage) {
this.firstPage = false;
}
deferred.resolve();
return deferred;
},
});
return ApplicationRouter;
})
This is the First View :
define([ "jquery", "backbone","text!../../pages/login.html"], function($, Backbone,loginTpl) {
var loginPageView = Backbone.View.extend({
events :{
"click #login" : "login",
"change input[type=radio]":"changeLanguage"
},
initialize : function() {
//Some Code
},
render: function() {
this.template = _.template(loginTpl);
$(this.el).html(this.template);
return this;
},
login:function(){
console.log("Login Clicked");
router.navigate('home', {trigger: false, replace: false});
},
changeLanguage:function(){
//console.log("change lang");
if(i18n.currentLocal == 'en'){
i18n.currentLocal='fr';
this.render();
$("#month2").attr('checked',true);
}else
{
if(i18n.currentLocal == 'fr'){
i18n.currentLocal='en';
this.render();
}
}
}
});
return loginPageView;
});
So instead of using router.navigate which caused some problems due to bugs in the router I think, I would like to use router.changePage('home.html');
and based on the URL I load to respective View.
Thank You