Route hijacking

The vue-router offers a couple of in-component guards, these guards are used for detecting page changes and updating the current layout.

Before route change

If you want to hijack the before route update you can use the beforeRouteUpdate method to prepend your application specific code (for example: adding a full page mask to do pretty page transitions).

export default {
  name: 'ContentPage',
  extends: AbstractContentPageComponent,
  beforeRouteUpdate(to, from, next) {
    // Add your awesome project specific code here.
    console.log('Awesome!');
    // When you are done, you should call the next method!
    next();
  },
};

After route change

After a route change is completed a method is triggered, this can be used to hide your full page mask or trigger page tracking code.

export default {
  name: 'ContentPage',
  extends: AbstractContentPageComponent,
  methods: {
    handleRouteChangeComplete() {
      // Route change is completed.
      // This means all new blocks are registered and in the DOM.
    },
  },
};