diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 4fb0950f..1e7b6dd4 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -3,9 +3,15 @@
     <a href="/" class="navbar-brand">{{ flamencoName }}</a>
     <nav>
       <ul>
-        <li><a href="/">Jobs</a></li>
-        <li><a href="/">Workers</a></li>
-        <li><a href="/">Settings</a></li>
+        <li>
+          <router-link to="/">Jobs</router-link>
+        </li>
+        <li>
+          <router-link to="/workers">Workers</router-link>
+        </li>
+        <li>
+          <router-link to="/settings">Settings</router-link>
+        </li>
       </ul>
     </nav>
     <api-spinner />
@@ -13,39 +19,14 @@
       version: {{ flamencoVersion }}
     </span>
   </header>
-  <div class="col col-1">
-    <jobs-table ref="jobsTable" @selectedJobChange="onSelectedJobChanged" />
-  </div>
-  <div class="col col-2">
-    <job-details :jobData="jobs.activeJob" />
-    <tasks-table v-if="jobs.activeJobID" ref="tasksTable" :jobID="jobs.activeJobID"
-      @selectedTaskChange="onSelectedTaskChanged" />
-  </div>
-  <div class="col col-3">
-    <task-details :taskData="tasks.activeTask" />
-  </div>
-  <footer>
-    <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
-    <update-listener ref="updateListener" :websocketURL="websocketURL" :subscribedJob="jobs.activeJobID"
-      @jobUpdate="onSioJobUpdate" @taskUpdate="onSioTaskUpdate" @message="onChatMessage"
-      @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
-  </footer>
+  <router-view></router-view>
 </template>
 
 <script>
-import * as urls from '@/urls'
 import * as API from '@/manager-api';
-import { useJobs } from '@/stores/jobs';
-import { useTasks } from '@/stores/tasks';
-import { useNotifs } from '@/stores/notifications';
 import { apiClient } from '@/stores/api-query-count';
 
 import ApiSpinner from '@/components/ApiSpinner.vue'
-import JobsTable from '@/components/JobsTable.vue'
-import JobDetails from '@/components/JobDetails.vue'
-import TaskDetails from '@/components/TaskDetails.vue'
-import TasksTable from '@/components/TasksTable.vue'
-import UpdateListener from '@/components/UpdateListener.vue'
 
 const DEFAULT_FLAMENCO_NAME = "Flamenco";
 const DEFAULT_FLAMENCO_VERSION = "unknown";
@@ -53,16 +34,9 @@ const DEFAULT_FLAMENCO_VERSION = "unknown";
 export default {
   name: 'App',
   components: {
-    ApiSpinner, JobsTable, JobDetails, TaskDetails, TasksTable, UpdateListener,
+    ApiSpinner,
   },
   data: () => ({
-    websocketURL: urls.ws(),
-    messages: [],
-
-    jobs: useJobs(),
-    tasks: useTasks(),
-    notifs: useNotifs(),
-
     flamencoName: DEFAULT_FLAMENCO_NAME,
     flamencoVersion: DEFAULT_FLAMENCO_VERSION,
   }),
@@ -71,99 +45,7 @@ export default {
     this.fetchManagerInfo();
   },
   methods: {
-    // onSelectedJobChanged is called whenever the selected job changes; this is
-    // both when another job is selected and when the selected job itself gets
-    // updated.
-    onSelectedJobChanged(jobSummary) {
-      if (!jobSummary) { // There is no selected job.
-        this.jobs.deselectAllJobs();
-        return;
-      }
-
-      const jobsAPI = new API.JobsApi(apiClient);
-      jobsAPI.fetchJob(jobSummary.id)
-        .then((job) => {
-          this.jobs.setSelectedJob(job);
-          // Forward the full job to Tabulator, so that that gets updated too.
-          this.$refs.jobsTable.processJobUpdate(job);
-        });
-    },
-    onSelectedTaskChanged(taskSummary) {
-      if (!taskSummary) { // There is no selected task.
-        this.tasks.deselectAllTasks();
-        return;
-      }
-      console.log("selected task changed:", taskSummary);
-      const jobsAPI = new API.JobsApi(apiClient);
-      jobsAPI.fetchTask(taskSummary.id)
-        .then((task) => {
-          this.tasks.setSelectedTask(task);
-          // Forward the full task to Tabulator, so that that gets updated too.
-          if (this.$refs.tasksTable)
-            this.$refs.tasksTable.processTaskUpdate(task);
-        });
-    },
-
-    sendMessage(message) {
-      this.$refs.jobsListener.sendBroadcastMessage("typer", message);
-    },
-
-    // SocketIO data event handlers:
-    onSioJobUpdate(jobUpdate) {
-      if (!jobUpdate.previous_status)
-        return this.onJobNew(jobUpdate);
-      return this.onJobUpdate(jobUpdate);
-    },
-    onJobUpdate(jobUpdate) {
-      // this.messages.push(`Job update: ${jobUpdate.id} (${jobUpdate.previous_status} → ${jobUpdate.status})`);
-      if (this.$refs.jobsTable) {
-        this.$refs.jobsTable.processJobUpdate(jobUpdate);
-      } else {
-        console.warn("App: this.$refs.jobsTable is", this.$refs.jobsTable);
-      }
-
-      if (this.jobs.activeJobID == jobUpdate.id) {
-        this.onSelectedJobChanged(jobUpdate);
-      }
-    },
-    onJobNew(jobUpdate) {
-      if (!this.$refs.jobsTable) {
-        console.warn("App: this.$refs.jobsTable is", this.$refs.jobsTable);
-        return;
-      }
-
-      // this.messages.push(`New job: ${jobUpdate.id} (${jobUpdate.status})`);
-      this.$refs.jobsTable.processNewJob(jobUpdate);
-    },
-
-    /**
-     * Event handler for SocketIO task updates.
-     * @param {API.SocketIOTaskUpdate} taskUpdate
-     */
-    onSioTaskUpdate(taskUpdate) {
-      if (this.$refs.tasksTable)
-        this.$refs.tasksTable.processTaskUpdate(taskUpdate);
-      if (this.tasks.activeTaskID == taskUpdate.id)
-        this.onSelectedTaskChanged(taskUpdate);
-    },
-
-    onChatMessage(message) {
-      console.log("chat message received:", message);
-      this.messages.push(`${message.text}`);
-    },
-
-    // SocketIO connection event handlers:
-    onSIOReconnected() {
-      this.$refs.jobsTable.onReconnected();
-      if (this.$refs.tasksTable)
-        this.$refs.tasksTable.onReconnected();
-      this.fetchManagerInfo();
-    },
-    onSIODisconnected(reason) {
-      this.flamencoName = DEFAULT_FLAMENCO_NAME;
-      this.flamencoVersion = DEFAULT_FLAMENCO_VERSION;
-      this.jobs.deselectAllJobs();
-    },
+    // TODO: also call this when SocketIO reconnects.
     fetchManagerInfo() {
       const metaAPI = new API.MetaApi(apiClient);
       metaAPI.getVersion().then((version) => {
diff --git a/web/app/src/components/NotificationBar.vue b/web/app/src/components/NotificationBar.vue
new file mode 100644
index 00000000..013f1083
--- /dev/null
+++ b/web/app/src/components/NotificationBar.vue
@@ -0,0 +1,14 @@
+<template>
+  <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
+</template>
+
+<script>
+import { useNotifs } from '@/stores/notifications';
+
+export default {
+  name: 'NotificationBar',
+  data: () => ({
+    notifs: useNotifs(),
+  }),
+}
+</script>
diff --git a/web/app/src/main.js b/web/app/src/main.js
index 7ad6cbfe..6253d57e 100644
--- a/web/app/src/main.js
+++ b/web/app/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from '@/App.vue'
+import router from '@/router/index'
 
 // Ensure Tabulator can find `luxon`, which it needs for sorting by
 // date/time/datetime.
@@ -15,4 +16,5 @@ const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
+app.use(router)
 app.mount('#app')
diff --git a/web/app/src/router/index.js b/web/app/src/router/index.js
new file mode 100644
index 00000000..5549590d
--- /dev/null
+++ b/web/app/src/router/index.js
@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'jobs',
+      // route level code-splitting
+      // this generates a separate chunk (ViewName.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/JobsView.vue')
+    },
+    {
+      path: '/workers',
+      name: 'workers',
+      component: () => import('../views/WorkersView.vue')
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('../views/SettingsView.vue')
+    }
+  ]
+})
+
+export default router
diff --git a/web/app/src/urls.js b/web/app/src/urls.js
index a25091a4..8bfbd283 100644
--- a/web/app/src/urls.js
+++ b/web/app/src/urls.js
@@ -1,6 +1,7 @@
 
 let url = new URL(window.location.href);
 url.port = "8080";
+url.pathname = "/";
 const flamencoAPIURL = url.href;
 
 url.protocol = "ws:";
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
new file mode 100644
index 00000000..9a5fecac
--- /dev/null
+++ b/web/app/src/views/JobsView.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="col col-1">
+    <jobs-table ref="jobsTable" @selectedJobChange="onSelectedJobChanged" />
+  </div>
+  <div class="col col-2">
+    <job-details :jobData="jobs.activeJob" />
+    <tasks-table v-if="jobs.activeJobID" ref="tasksTable" :jobID="jobs.activeJobID"
+      @selectedTaskChange="onSelectedTaskChanged" />
+  </div>
+  <div class="col col-3">
+    <task-details :taskData="tasks.activeTask" />
+  </div>
+  <footer>
+    <notification-bar />
+    <update-listener ref="updateListener" :websocketURL="websocketURL" :subscribedJob="jobs.activeJobID"
+      @jobUpdate="onSioJobUpdate" @taskUpdate="onSioTaskUpdate" @message="onChatMessage"
+      @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
+  </footer>
+</template>
+
+<script>
+import * as urls from '@/urls'
+import * as API from '@/manager-api';
+import { useJobs } from '@/stores/jobs';
+import { useTasks } from '@/stores/tasks';
+import { apiClient } from '@/stores/api-query-count';
+
+import JobsTable from '@/components/JobsTable.vue'
+import JobDetails from '@/components/JobDetails.vue'
+import TaskDetails from '@/components/TaskDetails.vue'
+import TasksTable from '@/components/TasksTable.vue'
+import NotificationBar from '@/components/NotificationBar.vue'
+import UpdateListener from '@/components/UpdateListener.vue'
+
+export default {
+  name: 'JobsView',
+  components: {
+    JobsTable, JobDetails, TaskDetails, TasksTable, NotificationBar, UpdateListener,
+  },
+  data: () => ({
+    websocketURL: urls.ws(),
+    messages: [],
+
+    jobs: useJobs(),
+    tasks: useTasks(),
+  }),
+  mounted() {
+    window.jobsView = this;
+  },
+  methods: {
+    // onSelectedJobChanged is called whenever the selected job changes; this is
+    // both when another job is selected and when the selected job itself gets
+    // updated.
+    onSelectedJobChanged(jobSummary) {
+      if (!jobSummary) { // There is no selected job.
+        this.jobs.deselectAllJobs();
+        return;
+      }
+
+      const jobsAPI = new API.JobsApi(apiClient);
+      jobsAPI.fetchJob(jobSummary.id)
+        .then((job) => {
+          this.jobs.setSelectedJob(job);
+          // Forward the full job to Tabulator, so that that gets updated too.
+          this.$refs.jobsTable.processJobUpdate(job);
+        });
+    },
+    onSelectedTaskChanged(taskSummary) {
+      if (!taskSummary) { // There is no selected task.
+        this.tasks.deselectAllTasks();
+        return;
+      }
+      console.log("selected task changed:", taskSummary);
+      const jobsAPI = new API.JobsApi(apiClient);
+      jobsAPI.fetchTask(taskSummary.id)
+        .then((task) => {
+          this.tasks.setSelectedTask(task);
+          // Forward the full task to Tabulator, so that that gets updated too.
+          if (this.$refs.tasksTable)
+            this.$refs.tasksTable.processTaskUpdate(task);
+        });
+    },
+
+    // SocketIO data event handlers:
+    onSioJobUpdate(jobUpdate) {
+      if (!jobUpdate.previous_status)
+        return this.onJobNew(jobUpdate);
+      return this.onJobUpdate(jobUpdate);
+    },
+    onJobUpdate(jobUpdate) {
+      // this.messages.push(`Job update: ${jobUpdate.id} (${jobUpdate.previous_status} → ${jobUpdate.status})`);
+      if (this.$refs.jobsTable) {
+        this.$refs.jobsTable.processJobUpdate(jobUpdate);
+      } else {
+        console.warn("App: this.$refs.jobsTable is", this.$refs.jobsTable);
+      }
+
+      if (this.jobs.activeJobID == jobUpdate.id) {
+        this.onSelectedJobChanged(jobUpdate);
+      }
+    },
+    onJobNew(jobUpdate) {
+      if (!this.$refs.jobsTable) {
+        console.warn("App: this.$refs.jobsTable is", this.$refs.jobsTable);
+        return;
+      }
+
+      // this.messages.push(`New job: ${jobUpdate.id} (${jobUpdate.status})`);
+      this.$refs.jobsTable.processNewJob(jobUpdate);
+    },
+
+    /**
+     * Event handler for SocketIO task updates.
+     * @param {API.SocketIOTaskUpdate} taskUpdate
+     */
+    onSioTaskUpdate(taskUpdate) {
+      if (this.$refs.tasksTable)
+        this.$refs.tasksTable.processTaskUpdate(taskUpdate);
+      if (this.tasks.activeTaskID == taskUpdate.id)
+        this.onSelectedTaskChanged(taskUpdate);
+    },
+
+    onChatMessage(message) {
+      console.log("chat message received:", message);
+      this.messages.push(`${message.text}`);
+    },
+
+    // SocketIO connection event handlers:
+    onSIOReconnected() {
+      this.$refs.jobsTable.onReconnected();
+      if (this.$refs.tasksTable)
+        this.$refs.tasksTable.onReconnected();
+    },
+    onSIODisconnected(reason) {
+      this.jobs.deselectAllJobs();
+    },
+  },
+}
+</script>
diff --git a/web/app/src/views/SettingsView.vue b/web/app/src/views/SettingsView.vue
new file mode 100644
index 00000000..f72f028d
--- /dev/null
+++ b/web/app/src/views/SettingsView.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="col col-1">
+    Settings
+  </div>
+  <div class="col col-2">
+    More settings
+  </div>
+  <div class="col col-3">
+    Completely different settings
+  </div>
+  <footer>
+    No footer here.
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'SettingsView',
+  components: {},
+  data: () => ({
+  }),
+  mounted() {
+    window.settingsView = this;
+  },
+  methods: {
+  },
+}
+</script>
diff --git a/web/app/src/views/WorkersView.vue b/web/app/src/views/WorkersView.vue
new file mode 100644
index 00000000..1fd5e379
--- /dev/null
+++ b/web/app/src/views/WorkersView.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="col col-1">
+    Workers
+  </div>
+  <div class="col col-2">
+    Worker Details
+  </div>
+  <div class="col col-3">
+    Column 3
+  </div>
+  <footer>
+    <notification-bar />
+    <update-listener ref="updateListener" :websocketURL="websocketURL" @sioReconnected="onSIOReconnected"
+      @sioDisconnected="onSIODisconnected" />
+  </footer>
+</template>
+
+<script>
+import * as urls from '@/urls'
+import * as API from '@/manager-api';
+import { apiClient } from '@/stores/api-query-count';
+
+import NotificationBar from '@/components/NotificationBar.vue'
+import UpdateListener from '@/components/UpdateListener.vue'
+
+export default {
+  name: 'WorkersView',
+  components: {
+    NotificationBar, UpdateListener,
+  },
+  data: () => ({
+    websocketURL: urls.ws(),
+  }),
+  mounted() {
+    window.workersView = this;
+  },
+  methods: {
+    // SocketIO connection event handlers:
+    onSIOReconnected() {
+    },
+    onSIODisconnected(reason) {
+    },
+  },
+}
+</script>