Router

The app uses Vue Router 4.

The route patterns are the same as the original Atlas: after the main url, there is a '/{{address}}/', and then possibly a '/{{topic}}/'.

For example: https://d1dycpzd1ntl2z.cloudfront.net/1234%20MARKET%20ST/property.

There is ONLY 1 change from how the original Atlas routed: while in the Nearby Activity topic, the selected activity is added to the route. For example: https://d1dycpzd1ntl2z.cloudfront.net/1234%20MARKET%20ST/nearby/311. This was requested for the original Atlas, but was impossible to implement.

We are attempting to make nearly all actions make changes to the route, and then all changes to the app follow the route change (except for changes such as showing imagery or opening cyclomedia, which are not reflected in the route).

There are 4 ways to change the route:

1. Search an address or OPA number using the address search bar on the map (in '@/components/map/AddressSearchControl.vue')
2. Click on the map where there is a PWD or DOR parcel (in '@/components/Map.vue')
3. Change the topic (in '@/components/Topic.vue')
4. Use the back and forward buttons

Because the logic is the same for setting a route in all of the above, there is a composable called '@/composables/UseRouting.js' which contains the function routeApp(), which contains that logic.

Note, in Map.vue and AddressSearchControl.vue, it first routes to a '/search' route using 'router.replace()'', which does not add the '/search' route to the history stack, so the Back and Forward buttons ignore this temporary routing. Then within '@/router/index.js', the '/search' route callback then calls routeApp() from '@/composables/UseRouting.js'.

Because many of the main functions that contain important app logic are called in route callback functions, these functions are stored in '@/router/index.js':

1. getGeocodeAndPutInStore(address) - this is ONLY called in 2 places:

• '@/router/index.js' in the callback after the address bar is used
• '@/router/index.js' in dataFetch()

2. getParcelAndPutInStore(lat, lng) - this is ONLY called in '@/router/index.js' in the callback after the map is clicked
3. dataFetch()
4. topicDataFetch()