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
   }
 ];