Add router and part detail.

Added a router and component for part detail.

Author: fiveisprime

package-lock.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

package.json

@@ -4,27 +4,25 @@
       <nav>
         <ul>
           <li class="nav-item">
-            <img class="logo" src="./assets/build-a-bot-logo.png">
-            Build-a-Bot
+            <router-link class="nav-link" :to="{ name: 'Home' }" exact>
+              <img class="logo" src="./assets/build-a-bot-logo.png">Build-a-Bot
+            </router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" :to="{ name: 'Build' }" exact>Build</router-link>
           </li>
         </ul>
       </nav>
     </header>
     <main>
-      <RobotBuilder/>
+      <router-view/>
     </main>
   </div>
 </template>
 
 <script>
-// import HomePage from './home/HomePage.vue';
-import RobotBuilder from './build/RobotBuilder.vue';
-
 export default {
-  name: 'app',
-  components: {
-    RobotBuilder,
-  },
+  name: "app"
 };
 </script>
 
@@ -38,7 +36,7 @@ body {
 
 <style scoped>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
 }
 main {
   margin: 0 auto;
@@ -66,4 +64,11 @@ ul {
   vertical-align: middle;
   height: 30px;
 }
+.nav-link {
+  text-decoration: none;
+  color: inherit;
+}
+.router-link-active {
+  color: white;
+}
 </style>

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="part" :class="position">
-    <img :src="selectedPart.src" title="arm">
+    <img @click="showPartInfo()" :src="selectedPart.src" title="arm">
     <button @click="selectPreviousPart()" class="prev-selector"></button>
     <button @click="selectNextPart()" class="next-selector"></button>
     <span class="sale" v-show="selectedPart.onSale">Sale!</span>
@@ -44,6 +44,12 @@ export default {
     this.$emit("partSelected", this.selectedPart);
   },
   methods: {
+    showPartInfo() {
+      this.$router.push({
+        name: "Parts",
+        params: { id: this.selectedPart.id, partType: this.selectedPart.type }
+      });
+    },
     selectNextPart() {
       this.selectedPartIndex = getNextValidIndex(
         this.selectedPartIndex,
@@ -86,6 +92,7 @@ export default {
 }
 .part img {
   width: 165px;
+  cursor: pointer;
 }
 .top {
   border-bottom: none;

src/build/PartSelector.vue

@@ -4,17 +4,17 @@
       <img class="robot" src="../assets/robot-home.png" aria-hidden="true">
     </div>
     <div class="getting-started">
-      <a href="">Get started</a> building your first robot.
+      <router-link to="/build">Get started</router-link>&nbsp;building your first robot.
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HomePage',
+  name: "HomePage",
   props: {
-    msg: String,
-  },
+    msg: String
+  }
 };
 </script>
 

src/home/HomePage.vue

@@ -1,8 +1,11 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from "vue";
+import App from "./App.vue";
+
+import router from "./router";
 
 Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App),
-}).$mount('#app');
+  router
+}).$mount("#app");

src/main.js

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>{{part.title}}</h1>
+    <div>{{part.description}}</div>
+  </div>
+</template>
+
+<script>
+import parts from "../data/parts";
+
+export default {
+  name: "PartInfo",
+  computed: {
+    part() {
+      const { partType, id } = this.$route.params;
+
+      return parts[partType].find(part => part.id === +id);
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/parts/PartInfo.vue

@@ -0,0 +1,29 @@
+import Vue from "vue";
+import Router from "vue-router";
+
+import HomePage from "../home/HomePage.vue";
+import RobotBuilder from "../build/RobotBuilder.vue";
+import PartInfo from "../parts/PartInfo.vue";
+
+Vue.use(Router);
+
+export default new Router({
+  mode: "history",
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: HomePage
+    },
+    {
+      path: "/build",
+      name: "Build",
+      component: RobotBuilder
+    },
+    {
+      path: "/parts/:partType/:id",
+      name: "Parts",
+      component: PartInfo
+    }
+  ]
+});