composables/use-route

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useRoute composable signature

useRoute() is a composable that returns the current route object in a Nuxt application. It is a wrapper around the identically named composable from vue-router. Import it from '#app' rather than directly from 'vue-router'.

useRoute route timing behavior

In Nuxt, useRoute() updates the route only after the page content has changed after navigation. In contrast, the vue-router version updates the route immediately, which can lead to synchronization issues between different parts of the template that rely on route metadata.

useRoute template access

Within the template of a Vue component, you can access the route using the $route property directly without needing to call useRoute().

useRoute properties and computed references

useRoute() provides the following computed references: fullPath (encoded URL with path, query and hash), hash (decoded hash section starting with #), query (route query parameters), matched (array of normalized matched routes), meta (custom data attached to the record), name (unique name for the route record), path (encoded pathname section), and redirectedFrom (route location attempted before reaching current location).

useRoute in middleware not recommended

Using useRoute() in middleware is not recommended and can lead to unexpected behavior because there is no concept of a 'current route' in middleware. The useRoute() composable should only be used in the setup function of a Vue component or in a Nuxt plugin. This also applies to any composable that uses useRoute() internally.

useRoute with vue-router import pitfall

Do not import useRoute directly from 'vue-router'. Instead, import it from '#app' to use Nuxt's implementation. Importing useRoute directly from 'vue-router' bypasses Nuxt's route synchronization behavior.

route.fullPath hydration issue

Using route.fullPath to affect the template can trigger hydration issues because browsers do not send URL fragments (for example #foo) when making requests. The route.fullPath will include the fragment on the client but not on the server, causing a mismatch.

useRoute example with dynamic page parameter

Example of using useRoute() with a dynamic page parameter: ```html <script setup lang="ts"> const route = useRoute() const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`) </script> <template> <div> <h1>{{ mountain.title }}</h1> <p>{{ mountain.description }}</p> </div> </template> ``` This accesses the route parameters to construct a dynamic API URL.

useRoute query parameters access

To access route query parameters (for example 'example' in the path '/test?example=true'), use useRoute().query instead of useRoute().params.

Give your agent this brain