Router ok + try to add i18n

src/components/Hello.vue

@@ -2,7 +2,7 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
 
-    <a href="maps">Go to selector</a>
+    <router-link to="maps">Go to selector</router-link>
     <h2>Essential Links</h2>
     <ul>
       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>

src/components/MapSelector.vue

@@ -1,10 +1,11 @@
-<div class="map-selector">
-  <h1 class="map-selector__title">Map Selector</h1>
-  <ul>
-    <li v-for="map in maps"><a>map.name</a></li>
-  </ul>
-</div>
-
+<template>
+  <div class="map-selector">
+    <h1 class="map-selector__title">Map Selector</h1>
+    <ul>
+      <li v-for="map in maps"><a>{{ map.name }}</a></li>
+    </ul>
+  </div>
+</template>
 
 <script type="text/javascript">
   const MAPS = {
@@ -12,11 +13,23 @@
       name: 'Alterac Pass'
     },
     battlefieldOfEternity: {
-      name: 'Battlefield of Etnernity'
+      name: 'Battlefield of Eternity'
     },
     blackheartSBay: {
       name: "Blackheart's Bay"
-    }
+    },
+    gardenOfTerror: {},
+    HanamuraTemple: {},
+    VolskayaFoundry: {},
+    HauntedMines: {},
+    TowerOfDoom: {},
+    InfernalShrines: {},
+    TombOfTheSpiderQueen: {},
+    SkyTemple: {},
+    DragonShire: {},
+    CursedHollow: {},
+    BraxisHoldout: {},
+    WarheadJunction: {}
   }
 
   module.exports = {

src/i18n.js

@@ -0,0 +1,7 @@
+import VueI18n from 'vue-i18n'
+
+const i18n = new VueI18n(
+  {}
+)
+
+export default i18n

src/router/index.js

@@ -14,7 +14,7 @@ export default new Router({
       component: Hello
     },
     {
-      path: 'maps',
+      path: '/maps',
       name: 'Map selector',
       component: MapSelector
     }