removed store dependancy for now, navigation is working

src/App.vue

@@ -1,10 +1,13 @@
 <template>
+  <router-view></router-view>
+  <!--
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">-->
       <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-      <component :is="Component" />
+  <!--    <component :is="Component" />
     </transition>
   </router-view>
+-->
 </template>
 
 <style lang="scss">

src/common-components/nav-button/nav-button.vue

@@ -12,15 +12,9 @@
         },
         methods: {
             navTo(){
-                alert(this.$router.navigate(this.scenario, this.$route))
+                this.$router.navigate(this.scenario, this.$route)
-            }
-        },
-        computed: {
-            currentPage() {
-                return this.$route.query.issPage;
             }
         }
-
     })
 </script>
 

src/layouts/vehicle-year/vehicle-year.vue

@@ -0,0 +1,12 @@
+<template>
+    <navButton text="back" scenario="CLICKED_BACK"></navButton>
+    Vehicle Year Placeholder
+</template>
+
+<script>
+    import navButton from '../../common-components/nav-button/nav-button.vue';
+    export default {
+        name: 'vehicle-year',
+        components: { navButton }
+    }
+</script>

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

@@ -1,15 +1,15 @@
 <template>
     <p>Welcome Page Placeholder</p>
     <br />
-    <NavButton text="Next" scenario="CLICKED_FORWARD"></NavButton>
+    <navButton text="Next" scenario="CLICKED_FORWARD"></navButton>
 </template>
 
 <script>
-    import NavButton from "../../common-components/nav-button/nav-button.vue";
+    import navButton from "../../common-components/nav-button/nav-button.vue";
 
     export default {
     name: "welcome-page",
-    components: { NavButton }
+    components: { navButton }
 }
 </script>
 

src/router/index.js

@@ -3,6 +3,7 @@ import { lazyLoadComponent } from "./dynamic-routing/component-loader";
 import { endpoints } from "../constants/mock-endpoints";
 import globalMethods from "@/global-methods";
 import {issPageValues} from '@/router/router-constants/issPage-values';
+import { routingTable } from "@/router/router-constants/routing-table";
 
 const routes = [
     {
@@ -110,7 +111,7 @@ router.navigate = async function (scenario, currentRoute, optionalQuery = {}, op
 // Get navigation map depending on the scenario and the current 'page' you're on.
 function getNavigationMap(scenario, currentRoute) {
     const issPageValue = currentRoute.query.issPage;
-    const matchedQueryValue = routingTable(store)
+    const matchedQueryValue = routingTable()
         .filter(
             (item) =>
                 item.issPageValue === issPageValue &&

src/router/router-constants/routing-table.js

@@ -2,23 +2,23 @@ import { issPageValues } from "@/router/router-constants/issPage-values";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 // Get store from router/index.js instead of importing it here to get updated values
-const routingTable = function(store) {
+const routingTable = function() {
   return [
     {
       issPageValue: issPageValues.VEHICLE_YEAR,
       maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,
-          issPageValue: "WELCOME_PAGE"
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
         },
       ],
     },
     {
-      issPageVlue: issPageValues.WELCOME_PAGE,
+      issPageValue: issPageValues.WELCOME_PAGE,
       maps: [
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
-          issPageValue: "VEHICLE_YEAR"
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR
         }
       ]
     }