Understand that you need to be able to serve these urls from the server if necessary, read the docs here: http://backbonejs.org/#History
Then you need to do at least three things.
First, after you have defined your routers, call Backbone.history
and make sure pushState is true:
Backbone.history.start({ pushState: true })
Second, get rid of all the #
in your links, like this:
<a href="pages/{{this.url}}"><h2>{{this.name}}</h2></a>
Third, and this is important, you need to intercept all clicks on local links and prevent their default behavior, which would be to route you to a new page. This is easy with jQuery:
$(document).on("click", "a[href^='/']", function(event){
event.preventDefault();
RouterNameGoesHere.navigate($(event.target).attr("href"), {trigger: true});
});
If you aren't using jQuery, listen to link click events in your views deal with the url in your event handlers. I modified your code to add the event
argument and event.preventDefault()
:
events: {
'click a.second': 'secondpage'
},
secondpage: function(event) {
event.preventDefault();
var secondpageRouter = new Backbone.Router();
var route = 'pages/secondpage';
secondpageRouter.navigate(route, {trigger: true});
}