diff --git a/README.md b/README.md index c16bcb723..65e8bfb95 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,16 @@ -# fmg-funnel-2021 +### Fix My Glass Vue Project +--- -## Project setup -``` -npm install -``` +This Repository is for Fix My Glass front end Vue and documentation associated with it. -### Compiles and hot-reloads for development -``` -npm run serve -``` +#### 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). -### Compiles and minifies for production -``` -npm run build -``` +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) -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +`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. + +`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. \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 8d6b0da8e..836a6256e 100644 --- a/src/router/index.js +++ b/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 {