Change meta tag when route change

Question

I'm working on a simple navbar using jq-router. I'm aiming to make a single page application using this plugin. my problem is how can I change the meta tags like title, upon changing of url.

Hope you help me.

Thanks.

    (function () {
   var routes = {},
    defaultRoute = 'home';

    routes['home'] = {
    url: '#/',
    templateUrl: 'pages/home.php',
    title: 'This is the Homepage'
    };

    routes['about'] = {
    url: '#/about',
    templateUrl: 'pages/about.php',
    title: 'This is the About page'
    };

    routes['contact'] = {
    url: '#/contact',
    templateUrl: 'pages/contact.php',
    title: 'This is the Contact page'
    };

    $.router
    .setData(routes)
    .setDefault(defaultRoute);

    $.when($.ready)
    .then(function() {
        $.router.run('.my-view','home');
    });
}());

Answer 1

You must use the onViewChange (here) callback:

$.router.onViewChange( function(e, viewRoute, route, params){
    document.title = route.title;
});