Change to anchors with click handlers so we can run code before transitioning to next pages

src/router/index.ts

@@ -112,7 +112,7 @@ const router = createRouter({
 
 router.beforeEach(async (to) => {
   // redirect to start page if no account
-  const publicPages = ["/start"];
+  const publicPages = ["/start", "/account", "/import-account"];
   const authRequired = !publicPages.includes(to.path);
   const authStore = useAccountStore();
 

src/views/StartView.vue

@@ -12,16 +12,16 @@
       <p class="text-center text-xl mb-4 font-light">
         Do you already have an identity to import?
       </p>
-      <router-link
+      <a
-        :to="{ name: 'account' }"
+        @click="onClickYes()"
         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
       >
         No
-      </router-link>
+      </a>
-      <router-link
+      <a
-        :to="{ name: 'import-account' }"
+        @click="onClickNo()"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        >Yes</router-link
+        >Yes</a
       >
     </div>
   </section>
@@ -33,5 +33,13 @@ import { Options, Vue } from "vue-class-component";
 @Options({
   components: {},
 })
-export default class StartView extends Vue {}
+export default class StartView extends Vue {
+  public onClickYes() {
+    this.$router.push({ name: "account" });
+  }
+
+  public onClickNo() {
+    this.$router.push({ name: "import-account" });
+  }
+}
 </script>