pull route info by query string

src/App.vue

@@ -1,14 +1,6 @@
 <template>
   <router-view></router-view>
   <div class="container-fluid">
-    <div class="row">
-      <div class="col">
-        <p class="text-center text-secondary fs-5 mb-4">
-          Select a year to get started
-        </p>
-        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-      </div>
-    </div>
     <div class="row mt-5">
       <radioCard
         radioLabel="Windshield"

src/constants/applicationConfig.js

@@ -0,0 +1,5 @@
+const applicationConfig = {
+
+}
+
+export { applicationConfig }

src/layouts/home/home.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="home">
         <h1>Home</h1>
-        <router-link to="/testc">Test</router-link>
+        <router-link to="/test">Test</router-link>
     </div>
 </template>

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
 }

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);

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,
         },
       });
     },