add: guard in router

src/views/CompleteRegisterView.vue

@@ -0,0 +1,99 @@
+<script setup>
+
+</script>
+
+<template>
+    <h2 class="title">Complete su registro</h2>
+
+    <div class="card-info flex-column">
+        <p>¿Como te quieres registrar?</p>
+        <label class="container">Embarcador
+        <input type="radio" checked="checked" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Transportista
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Broker (Embarcador)
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Broker (Transportista)
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+   .container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+
+    /* Hide the browser's default radio button */
+    .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    }
+
+    /* Create a custom radio button */
+    .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+    border-radius: 50%;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark {
+    background-color: #ccc;
+    }
+
+    /* When the radio button is checked, add a blue background */
+    .container input:checked ~ .checkmark {
+    background-color: #2196F3;
+    }
+
+    /* Create the indicator (the dot/circle - hidden when not checked) */
+    .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+    }
+
+    /* Show the indicator (dot/circle) when checked */
+    .container input:checked ~ .checkmark:after {
+    display: block;
+    }
+
+    /* Style the indicator (dot/circle) */
+    .container .checkmark:after {
+        top: 9px;
+        left: 9px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: white;
+    }
+</style>
+
+
+<!-- ¿Como te quieres registrar? (Opciones a elegir)
+1 - Embarcador
+2 - Transportista
+3 - Broker (Embarcador)
+4 - Broker (Transportista) -->