Add a catch-all route

For error messaging

ts/rmo/route/config.ts

@@ -14,6 +14,7 @@ import ComplianceProcess from "@/rmo/content/compliance/Process.vue";
 import ComplianceSubmit from "@/rmo/content/compliance/Submit.vue";
 import HomeBase from "@/rmo/view/Home.vue";
 import HomeDistrict from "@/rmo/view/district/Home.vue";
+import NotFound from "@/rmo/view/NotFound.vue";
 import NuisanceBase from "@/rmo/view/Nuisance.vue";
 import NuisanceDistrict from "@/rmo/view/district/Nuisance.vue";
 import RegisterNotificationsComplete from "@/rmo/view/RegisterNotificationsComplete.vue";
@@ -154,6 +155,12 @@ const routes: RouteRecordRaw[] = [
 		name: "Water",
 		component: Water,
 	},
+	// Catch-all route - must be last
+	{
+		path: "/:pathMatch(.*)*",
+		name: "NotFound",
+		component: NotFound,
+	},
 ];
 
 export const router = createRouter({

ts/rmo/view/NotFound.vue

@@ -0,0 +1,29 @@
+<template>
+	<main>
+		<Header />
+		<!-- Services Section -->
+		<section class="py-5">
+			<div class="container">
+				<h3 class="text-center mb-4">
+					Sorry, we're not sure where you're going...
+				</h3>
+				<p>
+					Looks like you've found yourself at a location that doesn't exist, or
+					at least on that we don't recognize. Maybe you should
+					<a href="/">head back to the main page</a>
+				</p>
+				<img
+					alt="a cartoon no-mosquitoes sign"
+					class="center-block"
+					height="300"
+					src="/static/img/anti-mosquito-sign.jpg"
+					width="300"
+				/>
+			</div>
+		</section>
+	</main>
+</template>
+
+<script setup lang="ts">
+import Header from "@/rmo/components/Header.vue";
+</script>