Update vue-router to use HTML5 history (#856)

closes #855

Only issues I see is that only HTML5 History API supported browsers support this which is fine given that the only thing that doesn't is probably the laptop they use to flash routers at competitions.

The 404 page can be up for debate lol.

.styleguide

@@ -16,6 +16,7 @@ modifiableFileExclude {
   \.gif$
   \.so$
   \.dll$
+  \.webp$
 }
 
 includeProject {

photon-client/src/router.js

@@ -1,33 +1,47 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from "vue-router";
+
 import Dashboard from "./views/PipelineView";
 import Cameras from "./views/CamerasView";
 import Settings from "./views/SettingsView";
 import Docs from "./views/DocsView";
+import NotFoundView from "./views/NotFoundView";
 
-Vue.use(Router);
 
-export default new Router({
-    // mode: 'history',
+Vue.use(VueRouter);
+
+export default new VueRouter({
+    mode: 'history',
     base: process.env.BASE_URL,
-    routes: [{
-        path: '/',
-        redirect: '/dashboard'
-    }, {
-        path: '/dashboard',
-        name: 'Dashboard',
-        component: Dashboard
-    }, {
-        path: '/cameras',
-        name: 'Cameras',
-        component: Cameras
-    }, {
-        path: '/settings',
-        name: 'Settings',
-        component: Settings
-    }, {
-        path: '/docs',
-        name: 'Docs',
-        component: Docs
-    }]
+    routes: [
+        {
+            path: '/',
+            redirect: '/dashboard'
+        },
+        {
+            path: '/dashboard',
+            name: 'Dashboard',
+            component: Dashboard
+        },
+        {
+            path: '/cameras',
+            name: 'Cameras',
+            component: Cameras
+        },
+        {
+            path: '/settings',
+            name: 'Settings',
+            component: Settings
+        },
+        {
+            path: '/docs',
+            name: 'Docs',
+            component: Docs
+        },
+        {
+            path: "*",
+            name: "NotFound",
+            component: NotFoundView
+        }
+    ]
 })

photon-client/src/views/NotFoundView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="not-found-container">
+    <div>
+      <v-card-title style="color: white; padding-bottom: 36px; font-size: 42px;">
+        The page you are looking for isn't here
+      </v-card-title>
+      <v-card-subtitle style="color: white; font-size: 18px;">
+        Please use the sidebar to find what you are looking for
+      </v-card-subtitle>
+    </div>
+    <img
+      src="../assets/NotFound.webp"
+      alt="missing-page"
+      style="margin-top: 64px"
+    >
+  </div>
+</template>
+
+
+<script>
+export default {
+    name: 'NotFound'
+}
+</script>
+
+<style>
+.not-found-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>