Setup routing for FruitDetails + fetch data on route transition + Fix fruit tests

src/router/index.js

@@ -1,22 +1,20 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Fruits from "../views/Fruits.vue";
+import Fruits from "@/views/Fruits.vue";
+import Fruit from "@/views/Fruit.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
-    name: "Fruits",
+    name: "FruitsDirectory",
     component: Fruits
   },
   {
-    path: "/fruit",
-    name: "Fruit",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ "../views/Fruit.vue")
+    path: "/fruit/:id",
+    name: "FruitDetails",
+    component: Fruit
   }
 ];
 

src/store/actions.js

@@ -4,5 +4,9 @@ export default {
   getFruits: async ({ commit }) => {
     const response = await axios.get("http://localhost:3000/fruit");
     commit("setFruits", response.data.data);
+  },
+  getFruit: async ({ commit }, id) => {
+    const response = await axios.get(`http://localhost:3000/fruit/${id}`);
+    commit("setFruit", response.data);
   }
 };

src/views/Fruit.vue

@@ -1,5 +1,23 @@
 <template>
   <div>
     <h1>Fruit Details</h1>
+    {{ this.fruit }}
   </div>
 </template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "FruitDetails",
+  computed: {
+    ...mapState(["fruit"])
+  },
+  beforeRouteEnter(to, from, next) {
+    next(async vm => {
+      await vm.$store.dispatch("getFruit", to.params.id);
+    });
+  }
+};
+</script>
+
+<style></style>