Creé un nuevo proyecto Vue usando el enrutador a través npm init vue@latest
. Durante el inicio, quiero obtener el hash de la URL, pero no puedo leerlo durante el inicio.
Para fines de reproducción, modifiqué el archivo App.vue para
<script setup lang="ts"> import { useRoute } from "vue-router"; import { ref } from "vue"; const hashFromRoute = ref(""); const hashFromWindow = ref(""); const route = useRoute(); hashFromRoute.value = route.hash.substring(1); hashFromWindow.value = window.location.hash.substring(1); </script> <template> <div> <div>Hash from route: {{ hashFromRoute }}</div> <div>Hash from window: {{ hashFromWindow }}</div> </div> <!-- ... render router view here ... --> </template>
y ejecute la aplicación con un hash de muestra http://localhost:3000/#foo=bar
El hash de la ruta está vacío, el hash de la ventana está configurado. Creo que esto se debe a que la llamada en el archivo App.vue es demasiado temprana. ¿Tengo que usar la window
aquí o hay alguna forma de "esperar" hasta que la instancia de Vue esté lista para leerla?
tal vez quieras obtener la URL de http://localhost:3000/#/?foo=bar
en caso de que importe el módulo de error
import { useRoute } from "vue-router"
const route = useRoute(); const {query} = route; console.log(query.foo) // bar