useLocation
useLocation is a plugin for handling location data and navigation.
# Snippet
# navigate / <Navigate .../>
Used to navigate or change the location. <Navigate/> tag is just the same as navigate function exported as a component for convenience.
# Arguments
| name | type | description |
|---|---|---|
| href | url | When the href is not absolute (thats it starting with /, # or http) it will navigate relative to window.location.href. |
| params? | key-value pairs object | used to replace params in the href for the URI encoded equivalents. <Navigate href="/some/:cat/:page" params={{ cat: 'variété', page: 'touché' }}/>will navigate to /some/vari%C3%A9t%C3%A9/touch%C3%A9. Same with the function version, navigate("/some/:cat/:page", {params: cat: 'variété', page: 'touché' }) |
| replace? | boolean [false] | to replace the browser history entry |
| scroll? | boolean [true] | to scroll to the top of the page |
# <Navigate/> Tag
Example using params
# Navigate Function
Example using params
# location
Returns location data in a reactive object
# Properties
| name | type | description |
|---|---|---|
| hash | signal | window.location.hash |
| href | signal | window.location.href |
| pathname | signal | window.location.pathname |
| path | signal | window.location.pathname + window.location.hash |
| query | signal | A key-value pairs object with URI decoded values of searchParams, such: {search:'variété'} |
| params | fn | A key-value pairs object with URI decoded values of Router params, such: {page:'variété'} |
# Log of `location`
We modify the location to trigger reactivity based on the location
# useBeforeLeave
Used to run code before leaving the route. To prevent leaving the route, return false. It also works with async functions.
# Arguments
| name | type | description |
|---|---|---|
| fn | fn | async or sync function that when returns false it prevents the navigation. The async function could resolve to false or just reject |
# Preventing navigation
Example preventing navigation