Corrected 404 page, added developer test page

src/layouts/componentTest/componentTest.vue

@@ -0,0 +1,60 @@
+  <template>
+  <div class="container-fluid">
+    <div class="row mt-5">
+      <radioCard
+        radioLabel="Windshield"
+        radioImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        radioID="windshield"
+      />
+      <radioCard
+        radioLabel="Side Window"
+        radioImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        radioID="sidewindow"
+      />
+      <radioCard
+        radioLabel="Back Glass"
+        radioImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        radioID="backglass"
+      />
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="Primary"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <listButton
+          buttonText="List Button"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <a href="#">Text Link</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+import radioCard from "@/uxComponents/radioCard/radioCard";
+import listButton from "@/uxComponents/listButton/listButton";
+export default {
+  name: "App",
+  components: {
+    buttonPrimary,
+    radioCard,
+    listButton
+  },
+};
+</script>

src/layouts/home/home.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/home/home.vue

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

src/layouts/notFound/notFound.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/notFound/notFound.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
+    <p> Not Found .... :( </p>
-    <p>Not found</p>
-  </div>
 </template>

src/router/index.js

@@ -1,14 +1,20 @@
 import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/storeActions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
+import ComponentTest from "@/layouts/componentTest/componentTest.vue";
 import NotFound from "@/layouts/notFound/notFound.vue";
 import store from "@/store";
 
 const routes = [
   {
-    path: "/not-found",
+    path: '/:pathMatch(.*)*',
-    name: "NotFound",
     component: NotFound,
+    name: "NotFound"
+  },
+  {
+    path: "/component-test", // This is a temporary route for testing.
+    name: "ComponentTest",
+    component: ComponentTest,
   },
   {
     path: "/",
@@ -16,7 +22,7 @@ const routes = [
 
       // 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" });
+        RetainStructureAndGoTo404(to, next);
       } else {
 
         // If we already have our route, go to it.
@@ -43,6 +49,10 @@ const routes = [
 
           })
           .catch((error) => {
+
+            // If we can't find the route, go to the 404 page.
+            RetainStructureAndGoTo404(to, next);
+
             console.log("error:");
             console.log(error);
           });
@@ -84,4 +94,14 @@ function GetRouteInfoFromPageName(pageName) {
   });
 }
 
+// Go to our 404 page but retain our structure when we go there (path, queryString, hash).
+function RetainStructureAndGoTo404(to, next){
+  next({ 
+    name: 'NotFound',
+    params: { pathMatch: to.path.split('/').slice(1) },
+    query: to.query,
+    hash: to.hash
+  });
+}
+
 export default router;