jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Updated router / readme
This commit is contained in:
Frank Rua 2021-11-02 11:47:04 -04:00 committed by GitHub
commit 7844d7e311
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
README.md
View file

@ -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.

2
src/router/index.js
View file

@ -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 {