allow web hash history, but require device connection for some routes

src/main.js

@@ -1,9 +1,19 @@
 import { createApp } from 'vue';
-import { createRouter, createMemoryHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import vClickOutside from "click-outside-vue3";
 import "./style.css";
 
 import App from './components/App.vue';
+import GlobalState from "./js/GlobalState.js";
+
+// helper function that force redirects to the main page if there is no device connection
+function handleRouteThatRequiresDeviceConnection() {
+    if(!GlobalState.connection){
+        return {
+            name: 'main',
+        };
+    }
+}
 
 const routes = [
     {
@@ -21,16 +31,18 @@ const routes = [
         path: '/contacts/:publicKey/messages',
         props: true,
         component: () => import("./components/pages/ContactMessagesPage.vue"),
+        beforeEnter: handleRouteThatRequiresDeviceConnection,
     },
     {
         name: "settings.radio",
         path: '/settings/radio',
         component: () => import("./components/pages/RadioSettingsPage.vue"),
+        beforeEnter: handleRouteThatRequiresDeviceConnection,
     },
 ];
 
 const router = createRouter({
-    history: createMemoryHistory(),
+    history: createWebHashHistory(),
     routes: routes,
 });