I created a new Vue project using the router via npm init vue@latest. During startup I want to get the hash from the url, but I can't read it during startup.
For reproduction purposes I modified the App.vue file to
<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>
and run the app with a sample hash http://localhost:3000/#foo=bar
The hash from the route is empty, the hash from the window is set. I think this is because the call in the App.vue file is too early? Do I have to use window here or is there a way to "wait" until the Vue instance is ready to read it?
maybe you want get url from
http://localhost:3000/#/?foo=bar
in case, you import error module
import { useRoute } from "vue-router"
const route = useRoute();
const {query} = route;
console.log(query.foo) // bar