router is working with mock endpoints for checking if a page exists

src/constants/mock-endpoints.js

@@ -0,0 +1,12 @@
+//used until real services are available
+
+const endpoints = {
+    GetRouteInfo: {
+      url: "https://mockey.qa.sagaws.net/service/ISS/Content/RouteInfo",
+      method: "GET",
+    },
+   
+  };
+  
+  export { endpoints };
+  

src/global-methods.js

@@ -17,5 +17,22 @@ export default {
           }
         );
     });
+  },
+
+  //used for mocked services
+  async mockCallHttpClient(method, endpoint) {
+    return new Promise((resolve, reject) => {
+      axios({ method: method, url: endpoint, crossDomain: true, responseType: {}})
+        .then((response) => {
+          return resolve(response);
+        },
+          error => {
+            console.error(error);
+            return reject(error.response);
+          }
+        );
+    });
+  
+  
   }
 };

src/layouts/error-404/error-404.vue

@@ -0,0 +1,9 @@
+<template>
+    404: Page Not Found
+</template>
+
+<script>
+    export default {
+        name: 'error-404'
+    }
+</script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -0,0 +1,9 @@
+<template>
+    Vehicle Make Placeholder
+</template>
+
+<script>
+    export default {
+        name: 'vehicle-make'
+    }
+</script>

src/layouts/welcome-page/welcome-page.vue

@@ -0,0 +1,17 @@
+<template>
+    <p>Welcome Page Placeholder</p>
+</template>
+
+<script>
+    export default {
+        name: 'welcome-page'
+    }
+</script>
+
+<style scoped>
+    p {
+        font-weight: bold;
+        color: purple;
+    }
+
+</style>

src/router/index.js

@@ -1,5 +1,7 @@
-import { storeActions } from "@/constants/store-actions";
 import { createWebHistory, createRouter } from "vue-router";
+import { lazyLoadComponent } from "./dynamic-routing/component-loader";
+import { endpoints } from "../constants/mock-endpoints";
+import globalMethods from "@/global-methods";
 
 const routes = [
     {
@@ -12,6 +14,11 @@ const routes = [
                 }
                 const routeData = await GetRouteInfoFromPageName(to.query.issPage);
 
+                if(routeData[0].name.toLowerCase() === "error")
+                {
+                    throw("Page not found!")
+                }
+
                 // Add our dynamic route.
                 router.addRoute({
                     path: routeData[0].path, // Always the same path, because we control it with query strings.
@@ -19,7 +26,6 @@ const routes = [
                     component: routeData[0].component,
                 });
 
-
                 // Assign current query string parameters, as well as our fmgPage one.
                 next({
                     name: routeData[0].name,
@@ -29,7 +35,7 @@ const routes = [
 
             } catch (error) {
                 console.log(error);
-                await GoToStartOn404(next);
+                GoToStartOn404(next);
             }
         }
     }];
@@ -42,9 +48,15 @@ const router = createRouter({
 // 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.
 async function GetRouteInfoFromPageName(pageName) {
+    
+    //move to store actions later?
+    /*
     const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, {
       pageName: pageName,
     });
+    */
+
+    const response = await globalMethods.mockCallHttpClient("GET", endpoints.GetRouteInfo.url + "?route=" + pageName)
     const jsonFromResponse = JSON.parse(response.data.Result);
     let routeData = [];
   
@@ -100,4 +112,19 @@ function getNavigationMap(scenario, currentRoute) {
     return matchedQueryValue[0];
 }
 
+function GoToStartOn404(next) {
+    const errorPageName = "error-404"
+    router.addRoute({
+        path: "/",
+        name: errorPageName,
+        component: lazyLoadComponent(errorPageName),
+    });
+
+    next({
+        name: errorPageName,
+        query: {issPage: errorPageName },
+    });
+
+};
+
 export default router;