src/router/index.js

@@ -25,14 +25,17 @@ const routes = [
   },
   {
     path: '/:pathMatch(.*)',
+    name: '404',
     component: notFoundPage
   },
   {
     path: '/videos',
+    name: 'video',
     component: videoView
   },
   {
     path: '/videos/:id',
+    name: 'videos',
     component: videosView
   }
 ]

src/views/VideosPage.vue

@@ -1,9 +1,18 @@
 <template>
+  <template v-if="notFound">
+    <div class="notFound">
+      <h1>404 Page</h1>
+      <p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
+    </div>
+  </template>
+  
+  <template v-else>
     <h1>{{ video.videoName }}</h1>
     <video controls>
       <source :src="require('@/assets/' + video.path)" type="video/mp4">
     </video>
   </template>
+</template>
 
 <script>
   import videoData from '../data/videos.js'
@@ -12,11 +21,13 @@
     data () {
       return {
         video: null,
+        notFound: false
       }
     },
     created() {
       let videoID = this.$route.params.id;
       this.video = videoData.find(v => v.videoID === videoID);
+      console.log(this.notFound);
     }
   }
 </script>