beginnings of simple Character page (list button links, base page with card)

client/src/components/Character.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <b-card>
+            <h4>{{ this.$route.params.character }}</h4>
+        </b-card>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card-body h4 {
+    text-transform: capitalize;
+}
+</style>
+
+<script>
+export default {
+};
+</script>

client/src/components/CharacterList.vue

@@ -3,6 +3,7 @@
         <b-button squared class="mx-2 my-1 character-button" size="sm"
                   v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
                   :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
+                  :to="`/character/${character.id}`"
         >
             {{ character.name }}
             <b-badge class="ml-1">{{ character.appearances}}</b-badge>

client/src/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import Home from './components/Home.vue';
 import Episode from './components/Episode.vue';
 import SearchResults from './components/SearchResults.vue';
+import Character from './components/Character.vue';
 
 Vue.use(Router);
 
@@ -15,6 +16,11 @@ export default new Router({
       name: 'Home',
       component: Home,
     },
+    {
+      path: '/character/:character',
+      name: 'Character',
+      component: Character,
+    },
     {
       path: '/:season/:episode',
       name: 'Episode',
@@ -25,6 +31,9 @@ export default new Router({
       name: 'SearchResults',
       component: SearchResults,
     },
+    {
+      path: '*',
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     // https://router.vuejs.org/guide/advanced/scroll-behavior.html