Merge pull request #30 from Safelite/feature/dynamic-routing

Updated router / readme

README.md

@@ -1,19 +1,16 @@
-# fmg-funnel-2021
+### Fix My Glass Vue Project
+---
 
-## Project setup
+This Repository is for Fix My Glass front end Vue and documentation associated with it. 
-```
-npm install
-```
 
-### Compiles and hot-reloads for development
+#### Routing
-```
+We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We are using a runtime dynamic routing solution. Some more information about dynamic routing can be found on the [official Vue Router documentation](https://next.router.vuejs.org/guide/advanced/dynamic-routing.html). 
-npm run serve
-```
 
-### Compiles and minifies for production
+Here is a high level overview of how our routing works:
-```
+![FixMyGlass - Routing](https://user-images.githubusercontent.com/44780237/139876801-7d5c495a-f361-4234-a8ec-69126a357f80.png)
-npm run build
-```
 
-### Customize configuration
+`RetainStructureAndGoTo404(to, next)` - Since our 404 path on our router is `path: '/:pathMatch(.*)*'` (meaning that we don't have a dedicated 404 route) we retain the information entered by the user in the url bar and just serve back our `NotFound` component on Vue. For example if a user was to type in `.../fmg/fmgPage=junkPage` Vue will retain this url in the browser and return our `NotFound` component. This could be especially useful for analytics and reporting.
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+`Next()` - Is a function that is native to Vue Router in which we call in order to send the user where want them to go based on some logic we have[. You can read more about Navigation Guards and the `Next()` function on the Vue Router documentation. ](https://next.router.vuejs.org/guide/advanced/navigation-guards.html)
+
+`GetRouteInfoFromPageName(PageName)` - This method typically takes the query string value of `fmgPage` and passes it into a call to our Content Service. The service will pull information on the page; matching page name passed to page name in our Cms. If we have a match, we will compile the route information and send it to our router to process. If we do not have a that page in our Cms, the user will be served back a 404 page while retaining the structure.

src/router/index.js

@@ -21,7 +21,7 @@ const routes = [
     beforeEnter(to, from, next) {
 
       // If we have no query string, or we don't have the FmgPage query string.
-      if (Object.keys(to.query).length === 0 || to.query.fmgPage === undefined) {
+      if (to.query.fmgPage === undefined) {
         RetainStructureAndGoTo404(to, next);
       } else {