Add Fruit data fetching beforeEnter route

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();
+    }
   }
 ];