Add Fruit data fetching beforeEnter route

src/components/GridItem.vue

@@ -38,7 +38,6 @@ export default {
 
   a {
     display: block;
-    text-decoration: none;
     color: inherit;
 
     .thumbnail {

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import Fruits from "@/views/Fruits.vue";
 import Fruit from "@/views/Fruit.vue";
+import store from "@/store/index";
 
 Vue.use(VueRouter);
 
@@ -14,7 +15,11 @@ const routes = [
   {
     path: "/fruit/:id",
     name: "FruitDetails",
-    component: Fruit
+    component: Fruit,
+    beforeEnter: async (to, from, next) => {
+      await store.dispatch("getFruit", to.params.id);
+      next();
+    }
   }
 ];
 

src/views/Fruit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Fruit Details</h2>
+    <h2><span @click="() => this.$router.back()">◀</span> Details</h2>
     {{ this.fruit }}
   </div>
 </template>
@@ -11,11 +11,6 @@ export default {
   name: "FruitDetails",
   computed: {
     ...mapState(["fruit"])
-  },
-  beforeRouteEnter(to, from, next) {
-    next(async vm => {
-      await vm.$store.dispatch("getFruit", to.params.id);
-    });
   }
 };
 </script>