To improve the functionality of Backbone.history.loadUrl, I suggest implementing a method to prevent hash navigation.

// METHOD TO PREVENT HASH NAVIGATION

var originalMethod = Backbone.history.loadUrl;

Backbone.history.loadUrl = function() {
    // By introducing an application state variable, we can control navigation
    if (app && app.states.isNavigationBlocked) {
        var previousHash = Backbone.history.fragment;
        window.location.hash = '#' + previousHash;
        return false;
    }
    else {
        return originalMethod.apply(this, arguments);
    }
};

Breakdown:

1)

Within Backbone's code, the hashchange event is monitored by listening for changes and triggering Backbone.history.checkUrl: https://github.com/jashkenas/backbone/blob/1.1.2/backbone.js#L1414

Backbone.$(window).on('hashchange', this.checkUrl);

2)

The function Backbone.history.checkUrl verifies hash changes and triggers Backbone.history.loadUrl:

checkUrl: function(e) {
  var currentHash = this.getFragment();
  if (currentHash === this.fragment && this.iframe) {
    currentHash = this.getFragment(this.getHash(this.iframe));
  }
  if (currentHash === this.fragment) return false;
  if (this.iframe) this.navigate(currentHash);
  this.loadUrl();
},

3)

The function Backbone.history.loadUrl identifies the matching route and executes its callback:

loadUrl: function(fragment) {
  fragment = this.fragment = this.getFragment(fragment);
  return _.any(this.handlers, function(handler) {
    if (handler.route.test(fragment)) {
      handler.callback(fragment);
      return true;
    }
  });
},

Tip:

Backbone.history.fragment stores the current hash, allowing access after the hashchange event but before router callbacks execute.

One way to potentially modify Backbone.history.loadUrl is by implementing a check mechanism that activates only when necessary. This code snippet shows an example of how you could do this, where a confirmation prompt is triggered before changing pages:

var goingBack = false;
function doCheck() {
  // TODO: Insert logic here to check if there is unsaved data
  return goingBack || window.confirm("Are you sure you want to change pages?");
}

var oldLoad = Backbone.History.prototype.loadUrl;
Backbone.History.prototype.loadUrl = function() {
  if(doCheck()) {
    return oldLoad.apply(this, arguments);
  } else {
    // Change the hash back
    goingBack = true;
    history.back();
    goingBack = false;
    return true;
  }
}

Remember to also handle window.onbeforeunload for scenarios where the user might leave the page entirely.

Starting from version 1.2.0, there is an option to customize the behavior of the Router.execute method by returning false in order to prevent routing. See the example below:

execute: function(callback, args, name) {
    if (!changesAreSaved) {
        // hint: .confirm will return false if "cancel" is pressed
        return window.confirm("You have unsaved changes. Do you want to discard them?");
    }

    // this part is the default action of the "execute" method - executing the router action
    if (callback)
        callback.apply(this, args);
}

I have been working on a solution for this issue for some time now, and I have finally found a resolution. After finding inspiration from this example, I decided to implement my own approach.

The concept involves overriding the navigate method and utilizing jQuery deferred objects to navigate at the appropriate moment. In my scenario, when a user attempts to navigate away from my view with unsaved changes, a dialog is displayed asking them to:

1) Save the changes before navigating 2) Proceed without saving changes 3) Cancel navigation and stay on the current page

Below is the code snippet that showcases my implementation of the Router's navigate method:

navigate: function(fragment, trigger) {
    var answer,
          _this = this;

    answer = $.Deferred();
    answer.promise().then(function() {
        return Backbone.Router.prototype.navigate(fragment, trigger);
    });

    if(fragment !== undefined){     
        var splitRoute = fragment.split('/');
        app.currentPatronSection = splitRoute[splitRoute.length - 1];
    }

    if (app.recordChanged) {
        this.showConfirm(function(ans){
            // Clear out the currentView
            app.currentView = undefined;
            answer.resolve();
        }, function(){

        });
        return answer.promise();
    } else {
        return answer.resolve();
    }
    return Backbone.Router.prototype.navigate(fragment, trigger);

},

The showConfirm method displays the dialog offering the three aforementioned options. Depending on the user's selection, I either save the form, resolve the answer to proceed with navigation, etc.

After receiving numerous calls to the loadUrl function on each reroute, I decided to experiment with a different approach following Dénes's solution, which ultimately proved successful for my situation.

/**
 * Making changes to Backbone to prevent rerouting under specific conditions.
 *
 * Solution was inspired by: https://stackoverflow.com/a/24535463/317135
 *
 * @param Backbone {Backbone}
 *   Reference to Backbone version 1.0.0
 * @param disallowRouting {function(): boolean}
 *   Function that returns `true` when routing should not be allowed.
 */
export default function permitRouteWhen(Backbone, permitRouting) {
  if (Backbone.VERSION !== '1.0.0') {
    console.error(
      `WARNING: Expected to modify Backbone version 1.0.0, but found
      ${Backbone.VERSION} - potential failure may occur.`
    );
  }

  const { checkUrl } = Backbone.history;

  Backbone.history.checkUrl = function(event) {
    if (!permitRouting()) {
      event.preventDefault();
      return;
    }
    return checkUrl.apply(this, arguments);
  }
}

To implement this method, use the following:

import permitRouteWhen from './backbone-permit-route-hack';
permitRouteWhen(window.Backbone, () => confirm('do you want to route?'));