binxhealth#9 - Added route to deal with non-matching path and a new c…

…omponent for page not found.

src/components/PageNotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="container-fluid">
+    <h2>Uh oh, the force was not with {{ $route.path }}.</h2>
+    <img
+        :src="'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/YODA_%283343464749%29.jpg/640px-YODA_%283343464749%29.jpg'"
+        alt="Yoda image">
+    <div class="row pt-3 pl-3">
+        <router-link
+          :to="`/`">
+        <button>Return home</button>
+        </router-link>
+    </div>
+  </div>
+</template>

src/router.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter)
 
 const Home = () => import('@/components/Home')
 const Person = () => import('@/components/Person')
-
+const PageNotFound = () => import('@/components/PageNotFound')
 // Export a new Vue Router instance to be used in the application.
 export default new VueRouter({
   routes: [
@@ -17,6 +17,10 @@ export default new VueRouter({
     {
       path: '/people/:id',
       component: Vue.component('Person', Person)
+    },
+    {
+      path: '*',
+      component: Vue.component('PageNotFound', PageNotFound)
     }
   ]
 })