Correctif css non scopé + tracking paramètre route battleground

src/components/Battleground.vue

@@ -1,5 +1,10 @@
 <template>
-  <div>Welcome to {{ battleground.name }}</div>
+  <div class="battleground" v-if="battleground">
+    <div>Welcome to {{ battleground.name }}</div>
+    <router-link to="alteracPass">Go to Alterac Pass</router-link>
+    <router-link to="battlefieldOfEternity">Go to Battlefield Of Eternity</router-link>
+    <router-link to="/battlegrounds">Back to selector</router-link>
+  </div>
 </template>
 
 <script>
@@ -9,17 +14,17 @@
     name: 'Battleground',
     data () {
       return {
-        battlegroundId: this.$route.params.battlegroundId,
-        battleground: BATTLEGROUNDS[this.$route.params.battlegroundId]
       }
     },
     computed: {
-      battlegroundId () {
-        return this.$route.params.battlegroundId
-      },
       battleground () {
         return BATTLEGROUNDS[this.$route.params.battlegroundId]
       }
+    },
+    watch: {
+      $route (to) {
+        this.battlegroundId = to.params.battlegroundId
+      }
     }
   }
 </script>

src/components/BattlegroundSelector.vue

@@ -20,9 +20,6 @@
       return {
         maps: MAPS
       }
-    },
-    mounted () {
-      console.log(MAPS)
     }
   }
 </script>
@@ -38,3 +35,9 @@
         border-top: solid #5659aa 1px
         border-left: none
 </style>
+
+<style lang="sass" scoped>
+  a
+    text-decoration: none
+    color: inherit
+</style>

src/components/Hello.vue

@@ -33,7 +33,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="sass">
+<style lang="sass" scoped>
 h1, h2
   font-weight: normal