Create a deep redirect in a headless site

One of our clients has a custom surveying application built with a Drupal back end, and a VueJS/headless front end. They use this application to record observations in various buildings and sites that don't meet accessibility requirements.

They give their clients access to the front end. This application organizes observations into particular sites, in particular projects, grouped by the requirement. Each observation can have photos attached, along with notes and recommended solutions.

Once the surveyors have completed their assessment, the back end Drupal site generates a PDF report that often exceeds 100 pages. Each observation is linked back into the application, essentially a link to the ID of the observation in the Drupal system. But to make the front end load quicker, we wanted to pass the IDs for the project and site along with the observation, so the front end loads everything up right away.

This Events, Conditions, and Actions (ECA) model intercepts requests to a particular observation, and rewrites the URL to include the specific UUIDs for the building, project, and area, and then redirects into the fully-loaded front end path! This made it easy to implement the Drupal side with nothing special or unusual for Drupal, while passing in a bunch of context to the Vue Router, which could then request and load all the corresponding data in a very straightforward way.