Dispatch event when firing routes

[tormjens]

It is especially neat when importing the scripts from the parent theme in a child theme. In one of my themes I do it like this:

// routes.js
export default {
    home: {
      init() {
        console.log('Home route fired.')
      }
    }
}

// main.js
/**
* Parent Themes Script
*/
import '../../../../core-theme/resources/assets/scripts/main';

/**
* Internal modules
*/
import routes from './routes'

/**
* Hook in to the parent themes router
*/
document.addEventListener('routed', e => {
let route = e.detail.route,
  fn = e.detail.fn;

if (routes[route] && typeof routes[route][fn] === 'function') {
  routes[route][fn]();
}
});

[retlehs]

thanks and sorry for the wait!

devs needing to support ie11 will need a polyfill: https://github.com/kumarharsh/custom-event-polyfill