From 766ccccdb674125bb37e92f065ccab774733cc98 Mon Sep 17 00:00:00 2001 From: Frank Date: Tue, 2 Nov 2021 11:22:09 -0400 Subject: [PATCH 1/3] Updated router / readme --- README.md | 22 +++++----------------- src/router/index.js | 2 +- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index c16bcb723..bb4f0d7a5 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,7 @@ -# 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 -``` - -### Compiles and minifies for production -``` -npm run build -``` - -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +#### Routing +We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We our 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). Our routing solution is as outlined below: \ 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 { From 5e027f904f8d971a21ea218223c0b284862880b9 Mon Sep 17 00:00:00 2001 From: Frank Rua <44780237+FrankRua@users.noreply.github.com> Date: Tue, 2 Nov 2021 11:23:33 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bb4f0d7a5..f703d287b 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,6 @@ This Repository is for Fix My Glass front end Vue and documentation associated with it. #### Routing -We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We our 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). Our routing solution is as outlined below: \ No newline at end of file +We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We our 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). Our routing solution is as outlined below: +![FixMyGlass - Routing](https://user-images.githubusercontent.com/44780237/139876801-7d5c495a-f361-4234-a8ec-69126a357f80.png) + From d0a6fbc8bef710de2cfba2c786244a04cb76355f Mon Sep 17 00:00:00 2001 From: Frank Date: Tue, 2 Nov 2021 11:41:46 -0400 Subject: [PATCH 3/3] Added some more documentation on routing --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f703d287b..65e8bfb95 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,13 @@ This Repository is for Fix My Glass front end Vue and documentation associated with it. #### Routing -We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We our 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). Our routing solution is as outlined below: +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). + +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) +`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