mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-11 23:07:16 +00:00
90784f79d7
* 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>
1.6 KiB
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"} ::