v0.15.148 - 38.4 / 24.4

useLocation

useLocation is a plugin for handling location data and navigation.

# Snippet

Used to navigate or change the location. <Navigate/> tag is just the same as navigate function exported as a component for convenience.

# Arguments

nametypedescription
hrefurlWhen 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

Example using params

# location

Returns location data in a reactive object

# Properties

nametypedescription
hashsignalwindow.location.hash
hrefsignalwindow.location.href
pathnamesignalwindow.location.pathname
pathsignalwindow.location.pathname + window.location.hash
querysignalA key-value pairs object with URI decoded values of searchParams, such: {search:'variété'}
paramsfnA 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

nametypedescription
fnfnasync 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