What is the difference between useRoute and useRouter in Nuxt3-Vue

user_13287723 0
Viewed 224

I want to understand, what is the difference between

const Route = useRoute()

and

const Router = useRouter()

in Nuxt3/Vue.

Also, I am not able to use router properly.

on submit, I want to push to another page with query strings using.

<template>
  <button @click="SearchTaxi"></button>
</template>

<script setup>
import { ref } from 'vue'
const router = useRouter()
const pickuppoint = ref('')
const dropoffpoint = ref('')

const SearchTaxi = () => {
router.push({
  path: `/airport-transfers/results?pickuppoint=${pickuppoint.value}&dropoffpoint=${dropoffpoint.value}`})
}
</script>

I expect route to change to

"url/airport-transfers/results?pickuppoint=XXXX&dropoffpoint=XXXX"

but i am getting

"url/airport-transfers/results"
nuxtjs3 vue-router nuxt.js vue.js
1 Answers

There are 2 things:

  • route, which will contain all the info related to the path, hostname, current query params etc...
  • router, the actual Vue router that will provide you all the features such as a client side navigation (with push or replace), rollback to the n-1, resolve etc...

You can check the API: https://router.vuejs.org/api/
And see which methods/fields are available on each one of them.

If you want to push some query params and a new path, you could use the following

router.push({
  path: '/airport-transfers/results',
  query: { 
    pickuppoint: pickuppoint.value,
    dropoffpoint: dropoffpoint.value
  }
})

As explained here: https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location

user_88165850
Related