durandal router.navigate not working

Question

I need to navigate to another view from a event handler in my code, I do it like this

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'underscore'],
 function (system, app, viewLocator, router, _) {
    system.log('starting app');
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");
    app.title = 'Destiny';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true,
        observable: true
    });

    router.map('destination', 'viewmodels/destination');
    router.activate();
    _.delay(function() {
        app.start().then(function() {
            //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
            //Look for partial views in a 'views' folder in the root.
            viewLocator.useConvention();

            //Show the app by setting the root view model for our application with a transition.
            app.setRoot('viewmodels/locationPicker', 'flip');
        });
    }, 1500);
}

);

Here I define a mapping between my moudle and the router - destination and set root view as another view locationPicker

in my another view locationPicker.js, I navigate to it like this

router.navigate('destination');

from the developer tool, I see that my view model destination.js file is loaded without error, but the view does not change at all. Why is this happening? BTW, I am using the durandal 2.0.1 version

Answer 1

The router plugin is initialized in the call to app.start. Therefore, you're configuring the plugin before initialization, and the configuration isn't being registered. Also, I'm not familiar with your syntax for registering the route. The more standard way is to pass in a list of objects with a route pattern and module id. Please try the following:

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router'],
 function (system, app, viewLocator, router) {
    system.log('starting app');
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");
    app.title = 'Destiny';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true,
        observable: true
    });

    app.start().then(function() {

        router.map([
            { route: 'destination',  moduleId: 'viewmodels/destination' }
        ]).activate();

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/locationPicker', 'flip');
    });
}