Nuxt/docs/content/1.docs/3.api/1.composables/use-route.md
Sébastien Chopin 90784f79d7
docs: new website design (#9007)
* docs: implement new website theme

* chore: rename dirs

* chore: update build

* lint fix

* chore: update deps

* fix: include node_modules in esbuild step

* chore: update deps

* Update .gitignore

* chore: update theme version

* up

* up

* fix: use svg for illustration

* chore: update to 0.0.12

* chore: force parse5 resolution

* stay with build

* feat: always display first home section

* Update yarn.lock

* chore: update theme

* fix lint

* docs: update home title

* chore: update website theme version

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* up

* chore: bump theme version

* up

* chore: up

* up up and up

* chore: generate

* fix: boolean value

* feat: new images

* update again

* chore: up

* ouep

* chore: up

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-11-16 11:04:28 +01:00

1.6 KiB

title description
useRoute The useRoute composable returns the current route.

useRoute

The useRoute composable returns the current route and must be called in a setup function, plugin, or route middleware.

Within the template of a Vue component, you can access the route using $route.

Example

In the following example, we call an API via useFetch using a dynamic page parameter - slug - as part of the URL.

<script setup>
const route = useRoute()
const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`)
</script>

<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

If you need to access the route query parameters (for example example in the path /test?example=true), then you can use useRoute().query instead of useRoute().params.

Apart from dynamic parameters and query parameters, useRoute() also provides the following computed references related to the current route:

  • fullPath: encoded URL associated with the current route that contains path, query and hash
  • hash: decoded hash section of the URL that starts with a #
  • matched: array of normalized matched routes with current route location
  • meta: custom data attached to the record
  • name: unique name for the route record
  • path: encoded pathname section of the URL
  • redirectedFrom: route location that was attempted to access before ending up on the current route location

::ReadMore{link="https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html"} ::