diff --git a/src/App.vue b/src/App.vue index b27da5d12..c4d5d301b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,6 @@ diff --git a/src/router/dynamic-routing/component-loader.js b/src/router/dynamic-routing/component-loader.js index f2df9e1d6..fc8a02427 100644 --- a/src/router/dynamic-routing/component-loader.js +++ b/src/router/dynamic-routing/component-loader.js @@ -1,3 +1,3 @@ export function lazyLoadComponent(componentName) { - return () => import(`@/layouts/${componentName}.vue`); // /selectModel/SelectModel + return () => import(`@/layouts/${componentName}/${componentName}.vue`); // /src/layouts/folder/component.vue } diff --git a/src/router/index.js b/src/router/index.js index c0e4b170d..c01945ed4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -2,7 +2,6 @@ import { createWebHistory, createRouter } from "vue-router"; import { storeActions } from "@/constants/storeActions.js"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; import NotFound from "@/layouts/notFound/notFound.vue"; -import Home from "@/layouts/home/home.vue"; import store from "@/store"; const routes = [ @@ -13,8 +12,42 @@ const routes = [ }, { path: "/", - Name: "Home", - component: Home, + 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) { + next({ name: "NotFound" }); + } else { + + // If we already have our route, go to it. + if(router.hasRoute(to.query.fmgPage)) + { + return next({ name: to.query.fmgPage }); + } + + // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms. + GetRouteInfoFromPageName(to.query.fmgPage).then((routeData) => { + + // Add our dynamic route. + router.addRoute({ + path: "/", // Always the same path, because we control it with query strings. + name: routeData[0].name, + component: routeData[0].component, + }); + + // Assign current query string parameters, as well as our fmgPage one. + next({ + name: routeData[0].name, + query: Object.assign(to.query, { fmgPage: routeData[0].name }), + }); + + }) + .catch((error) => { + console.log("error:"); + console.log(error); + }); + } + }, }, ]; @@ -23,43 +56,12 @@ const router = createRouter({ routes, }); -router.beforeEach(async (to, from, next) => { - NavigateToDynamicCmsRoute(to, next); -}); - -// Go to route if page exists in the CMS. -// If not, go to 404 page. -function NavigateToDynamicCmsRoute(to, next) { - let doesRouteResolve = router.resolve(to.path).matched.length > 0; - - if (!doesRouteResolve) { - GetRouteInfoForUrl(to.path) - .then((routeData) => { - // Add our dynamic route. - router.addRoute({ - path: routeData[0].path, - name: routeData[0].name, - component: routeData[0].component, - }); - - next(to.fullPath); - }) - .catch((error) => { - // Check status code, go to 404 page if 404. - console.log(error); - }); - } else { - next(); // Home (/) and NotFound (/not-found) will always resolve. - } -} - -// Get the route info for the given url. -// This will hit the content service and eventually the Cms. -// If the route is not found, reject Promise. -function GetRouteInfoForUrl(url) { +// Get route information by page name. +// This will reach out to the Cms and there is a 1:1 relationship between page names and route names. +function GetRouteInfoFromPageName(pageName) { return new Promise((resolve, reject) => { store - .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: url }) + .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName }) .then((response) => { // Add our route data and return our array. let jsonFromResponse = JSON.parse(response.data.Result); @@ -74,6 +76,7 @@ function GetRouteInfoForUrl(url) { }); resolve(routeData); + }) .catch((error) => { reject(error); diff --git a/src/store/index.js b/src/store/index.js index aa638fb86..3c78d7f1c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -91,12 +91,12 @@ export default createStore({ `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}` ); }, - getRouteInfo(context, { relativeUrl }) { + getRouteInfo(context, { pageName }) { return globalMethods.callHttpClient({ method: endpoints.GetRouteInfoEndpoint.method, endpoint: endpoints.GetRouteInfoEndpoint.url, payload: { - relativeUrl: relativeUrl, + pageName: pageName, }, }); },