Vue3 route.query empty

Question

Trying to pass route query to axios request, but it is empty.. route.queryreturns empty in mounted. route.queryreturns {"filter[city]": "Vilnius" } in axios then nextTick doesn't solve issue. Any tips?

import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import { initMap } from '../../functions/useMap';

import { useRouter, useRoute } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        const route = useRoute();

        onMounted(() => {
            console.log(route.query);  // log is {}
            fetchApartments();
        });
    
        function fetchApartments() {
            console.log(route.query); // log is {}
        
            axios.get('/api/apartments').then(response => {
                console.log(route.query); // log is { "filter[city]": "Vilnius" }
            });
        }
    }
}

Answer 1

Update your code like this:

...
import { computed } from 'vue'
...

and inside setup()

const route = useRoute();
const query = computed(() => route.query)

The missing part here is computed property.

Answer 2

Route navigation is asynchronous. You need to wait for router.isReady for queries to be available

import { useRouter, useRoute } from 'vue-router';
export default {
 setup() {
  const router = useRouter();
  const route = useRoute();
  onMounted(async () => {
   await router.isReady();
    console.log(route.query);
   });
 }
}