Route Params
Bind Vue state to Vue Router route params with useRouteParams.
useRouteParams binds state to the route params, the dynamic
segments of the route (/users/:id). Useful when an identifier belongs in
the path rather than the query string.
<script setup lang="ts">
import { } from 'kvantjs/vue-router'
import * as from 'kvantjs/schema'
// Route: /users/:id
const = ('id', .())
</script>
<template>
<>User #{{ }}</>
</template>Writing a param navigates to the updated path:
id.value = '42' // navigates to /users/42Route params are only as writable as your route definitions allow. Writing a param not present in the current route's pattern has no effect on the path; for values that don't belong in the path, prefer query parameters.
Repeatable params work too:
// Route: /docs/:slug*
const = ('slug', .(.()).([]))Key maps bind several params at once:
// Route: /:org/:repo
const = ({
: .(),
: .(),
})Options
Prop
Type
Set options once for a component subtree using the provide function:
<script setup lang="ts">
import { } from 'kvantjs/vue-router'
({ : 'push' })
</script>